Vue2组件间通信

父传子

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式： <h1 ref="xxx">... ...</h1> 或<School ref="xxx">... ...</School>
4. 获取方式： this.$refs.xxx 修改：this.$refs.xxx = "xxxx"

props属性

让组件接收外部传过来的数据
（1）传递数据：<Demo name="xxxx"></Demo>
（2）接收数据：
  第一种方式（只接收）props:['name']
  第二种方式（限制类型）props:{name:Number}
  第三种方式（限制类型、限制必要性、指定默认值）

props:{ 	
	name:{
		type:String,//类型 		
		required:true,//必要性 		
		default:'老王'//默认值 	
	}
}		

备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告。

Children属性

this.$children[0].xxxx = "xxx" 需要注意 $children 并不保证顺序，也不是响应式的。

实例

App.vue

<template>
  <div id="app">
    <School name="xxx大学"></School>
  </div>
</template>
<script>
import School from "./components/School";
export default {
  name: "App",
  components: {
    School,
  },
  mounted() {},
};
</script>

School1.vue

<template>
  <div>学校名称：{{name}}</div>
</template>

<script>
export default {
   props:['name']
}
</script>

School2.vue

<script>
export default {
   props:{
    name:String
   }
}
</script>

School3.vue

<script>
export default {
   props:{
    name:{
        type:String,
        default:"某名牌大学",
        required:true
    }
   }
}
</script>

子传父

自定义事件

1. 一种组件间通信的方式，适用于：子组件===>父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：
   （1）第一种方式，在父组件中：<Demo @shijian="test"/>或<Demo v-on:shijian="test"/>
   （2）第二种方式，在父组件中：
   （3）若想让自定义事件只触发一次，可以使用once修饰符，或$once方法。
4. 触发自定义事件：this.$emit('监听的方法名',逻辑内容)
5. 解绑自定义事件：this.$off('解绑事件名')
6. 组件上也可以解绑原生DOM事件，需要使用native修饰符
7. 注意，通过this.$refs.xx.$on('监听的方法名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题。

<Demo ref="demo"/> 	  
...... 	  
mounted(){ 	
 this.$refs.xx.$on('监听的方法名',逻辑内容) 	  
}  

实例

方式一：School.vue

<Student ref="child"></Student>

this.$refs.child.$once("someData", that.saveData);//只执行1次
this.$refs.child.$on("someData", that.saveData);

方式二：
School.vue

<Student @someData="saveData"></Student>

Student.vue

this.$emit('someData',this.name)

解绑组件自定义事件

this.$off('xxxx事件名xxxx')//解绑1个自定义事件

 this.$off(['xxxx事件名1xxxx','xxxx事件名2xxxx'])//解绑多个自定义事件

this.$off()//解绑所有自定义事件

兄弟组件传值

parent属性

兄弟组件1
this.$parent.$emit("方法名", 参数);
兄弟组件2
this.$parent.$on("方法",(item)=>{
       console.log(item);
})

祖先组件向其所有子孙后代传值

provide/inject属性

provide: {
  dataTest: "xxxx"
}

子孙组件

inject: ["dataTest"]

任意组件通信

$bus（全局事件总线）

1. 一种组件间通信的方式，适用于任意组件通信。
2. 安装全局事件总线：

    new Vue({
   	... ...
   	beforeCreate(){
   		Vue.prototype.$bus = this;//安装全局事件总线，$bus就是当前应用的vm
   	}
   	... ...
   })
   

3. 使用事件总线：
   （1）接收数据：A组件想接收数据，则A组件中给$bus绑定自定义事件，事件的回调留着A组件自身。

   methods(){
   	demo(data){... ...}
   }
   ... ...
   mounted(){
   	this.$bus.$on('xxx',this.demo)
   }
   

   （2）提供数据：this.$bus.$emit('xxx',数据)
4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

1. 一种组件间通信的方式，适用于任意组件通信。

2. 使用步骤：
   （1）安装pubsub:npm i pubsub-js
   （2）引入：import pubsub from "pubsub-js"
   （3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留着A组件自身

   methods:{
   	demo（_,data）{... ...}//_代表mesgName用作占位
   	......
   }
   mounted(){
   	this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
   }
   

   （4）提供数据：pubsub.publish('xxx',数据)
   （5）最好在beforeDestroy钩子中，用pubsub.unsubscribe(this.pid)消订阅