Vue组件间传递数据


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

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

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

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

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

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

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

类似于JavaScript的设计模式——观察者模式,dispatchEventaddEventListener。在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

你可能感兴趣的:(Vue组件间传递数据)