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。它现在可能有效，但是当您的应用程序增长时，您的调试工作量将大大增加。当您与一组开发人员一起开发同一个应用程序时，这将是一场噩梦。

相反，您应该使用适当的 parent-child 通信。这是官方文档：

从 parent 到 child: https://vuejs.org/guide/components.html#Passing-Data-with-Props

从child到parent：https://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

这是 Whosebug 中的另一个参考资料，可以帮助您解决问题：

该参考答案中的 jsFiddle 示例有一个 parent 组件将数据传递给 child 和 child 组件将事件传递给 parent 的情况。

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

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

和child组件可以从parent接收上述数据如下：

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

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

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

vue.js - right way to pass data from child to component?

vue-component