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

对于将数据从根实例传递到组件的正确方法，我有点困惑。vue.js - 将数据从子项传递到组件的正确方法？

比方说，我有这根实例：

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”。

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

来源

2016-10-22 Qar

您不应该使用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示例，以便更好地了解此通信的工作原理。

来源

2016-10-22 11:00:13 Mani

感谢您的回复。试图做你所说的： http://kopy.io/saZ0K 我怎么得到undefined？在检查DOM时，foo属性会添加到组件中。但是我无法使用this.foo获取它？ – Qar

您正尝试在'

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

回答

相关问题