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$-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示例来更好地理解此通信的工作原理.