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

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 示例有父组件将数据传递给子组件，子组件将事件传递给父组件的情况。

简而言之，parent 可以向 child 传递数据并监听 child 事件，如下所示：

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

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

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

您可以按照那个 jsFiddle 示例来更好地理解这种通信是如何工作的。