Question

关于将数据从根实例传递到组件的正确方法，我有点困惑。

假设我有这个根实例：

const app = new Vue({
    el: '#app',

    data: {
        foo: 'bar'
    },
});

然后我在一个单独的.vue文件中有一个组件：

<template>
    <div>I'm a component!</div>
</template>

<script>
    export default {
        methods: {
            fooTest: function() {   
                console.log(this.$root.$data.foo);
            },
        },

        mounted() {
           this.fooTest();
        }
    }
</script>

这很好用。 fooTest将从根实例数据中获得“bar”。

但这是正确的方法吗？或者最佳做法是什么？

Answer 1

您不应该使用this.$root.$data。它现在可能有效，但是当您的应用程序增长时，您的调试工作量会大大增加。当您与同一个应用程序上的开发团队合作时，这将是一场噩梦。

相反，你应该使用适当的亲子沟通。以下是官方文件：

从父母到孩子：https://vuejs.org/guide/components.html#Passing-Data-with-Props

从孩子到父母：https://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

以下是StackOverflow中的另一个参考资料，可以帮助您：https://stackoverflow.com/a/40181591/654825

该参考答案中的jsFiddle示例包含父组件将数据传递给子组件的情况，以及子组件将事件传递给父组件。

简而言之，父母可以将数据传递给孩子，并按照以下方式收听儿童事件：

<child-component :data-from-parent="someValue" v-on:event-from-child="methodInParent"></child-component>

子组件可以从父级接收上述数据，如下所示：

Vue.component('child-component', {
    props: ["dataFromParent"],
    ...
});

您可以按照jsFiddle示例来更好地了解此通信的工作原理。

vue.js - 从子到组件传递数据的正确方法？

1 个答案: