Vue组件间传递数据

组件是Vue很强大的一个功能，所以掌握Vue组件之间的信息传递很重要。大致分为三种常见的情况。

• 父组件向子组件传递数据
• 子组件向父组件传递数据
• 兄弟组件传递数据

下面我们就这三种情况，分别演示其方法

父组件通过rop向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

• 一个组件可以拥有任意数量的prop
• 任何值都可以传递给任何prop
  demo

通过事件子组件向父组件发送数据

类似于JavaScript的设计模式——观察者模式，dispatchEvent和addEventListener。在Vue中，子组件用$emit()来触发事件，父组件用$on() 来监听子组件的事件。

• 自定义事件
• 在子组件中用$emit触发事件，第一个参数是事件名，后边的参数是要传递的数据
• 在自定义事件中用一个参数来接受
  demo

使用bus进行兄弟组件传递数据

在兄弟组件进行数据传递时，通常的做法是使用一个空的Vue实例作为中央事件总线：

var bus = new Vue()

//触发组件A中的事件
bus.$emit('id-selected',1)

//在组件B创建的钩子中监听事件
bus.$on('id-selected',function(id){
    //...
})

demo

父链

this.$parent

子链(利用索引)

this.$refs.xxx