vue组件通讯

vue组件通讯

1父子通讯

1-1.利用对象特性–浅拷贝

1-2.利用vue中的sync和$emit实现

1-3.把props接收的值处理成data变量或computed计算属性

//1-1
//在传递props时用Object.assign拷贝一份数据（这里数据是一个单层级对象），然后在子组件里面对其进行编辑
//1-2
this.$emit('向父级派发的事件名',传递的数据)
//1-3
props: ['num'],
data: function () {
  return {
    num: this.inum
  }
}

2隔代通讯

1.provide和inject

//1.通过对象提供
export default {
  name: "app",
  provide:{ num:1 },
  data() {
    return {}
}
//2.通过函数提供
export default {
  name: "app",
  provide(){
    return {
      app:this
    }
  },
  data() {
    return {}
}

//1.inject:接受
export default {
  name: "bcom",
  inject: ["num"]
}
//2.inject:接受
export default {
  name: "bcom",
  inject: ["app"]
}

2.$attrs和$listeners

//父组件
<child class="com" name="attr" :foo="foo" :boo="boo" :coo="coo" :doo="doo" ></child>
data() {
  return {
    foo: 'Hello World!',
    boo: 'Hello Javascript!',
    coo: 'Hello Vue',
    doo: 'Last'
  }
},
//子组件
 created() {
    console.log(this.$attrs) // {name: "attr", foo: "Hello World!", boo: "Hello Javascript!", coo: "Hello Vue", doo: "Last"}
  }
//$attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件的props中了），在子组件中的$attr会把声明的prop剔除。在子组件中可以通过v-bind="$attr",传递给孙组件,v-bind="$listeners",传递方法

3.兄弟通讯

//1 bus方法
	//通过bus.$emit('changeName',"哈哈")传递
	//通过bus.$on('changeName',name=>{
	//	console.log(name)//哈哈
	//})
//2vuex