组件间数据传递

目录

根据组件之间的关系

父子

兄弟关系

祖孙关系

拿到实例

vuex

---

根据组件之间的关系

父子

• 父->子  props
• 子->父  emit事件传值

兄弟关系

evenBus的emit/on

• A->B

        点击（或其他）触发A组件中的事件，来传递事件和数据给B组件

bus.emit('自定义事件'，数据)

• B->A

bus.on('自定义事件', ( data ) = {})

祖孙关系

provide.inject 

非响应式

• 某个属性

//父组件
provide(){
    return {
        num:this.num
    }
}

//子组件
inject:['num']

• 全部属性

//父组件
provide(){
    return {
        app:this
    }
}
data(){
    return {
        num:1
    }
}

//子组件
inject:['app']
console.log(this.app.num)

若要变成响应式，在provide中使用computed( ()=> 要共享的数据 )

注意：{{属性名.value}}

$attrs 与$ listeners

// child：并未在props中声明foo  
<p>{{$attrs.foo}}</p>  
  
// parent  
<HelloWorld foo="foo"/>  

// 给Grandson隔代传值，communication/index.vue  
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>  
  
// Child2做展开  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  
  
// Grandson使⽤  
<div @click="$emit('some-event', 'msg from grandson')">  
{{msg}}  
</div>  

拿到实例

另外也可以通过父子间拿到实例的方法，对实例对象（数组）进行属性操作

$相当于document.getElementById

1.ref

• ref给父组件中的子组件命名
• 通过$ref.name获取子组件，可获得其属性

2.parent/children

• 组件可直接用$children获得子组件实例数组
  • 数组是无序的
  • 不是响应式的
  • 最底层子组件$children是空数组
• 子组件可直接用$parent获得父组件实例对象
  • 根组件：$root
  • 根组件#app的$parent拿到的是new Vue实例，再往上拿是undefined

vuex