Vue中组件通信

Vue中组件通信

props的使用

• 功能：让组件接收外部传过来的数据
• 传递数据的方式：<Demo name="xxx"/>
• 接收数据的方式：
  • 只接收：props:['name']
  • 接收并限制类型：props:{name:String}
  • 限制类型，必要性，指定默认值

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

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

props传递数据(父–>子)

父组件给子组件传递数据，子组件接受数据，通过this.xxx来使用数据

传递方

<template>
  <div id="app">
    <Company :companyName="name" age="18"></Company>
  </div>
</template>

<script>

import Company from "./components/Company";
export default {
  name: 'App',
  components: {
    Company
  },
  data(){
    return{
      name:'machoul'
    }
  }
}
</script>

接收方

<template>
<div>
  <h2>{{companyName}}</h2>
  <h2>{{age}}</h2>
</div>
</template>

<script>
export default {
  name: "Company",
  props:[
    'companyName',
    'age'
  ]
}
</script>

props传递方法(子–>父)

父组件给子组件传递一个函数，子组件调用函数通过参数来给父组件传递数据

父组件

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <Employee :changeMsg="changeMsg"></Employee>
  </div>
</template>

<script>

import Employee from "./components/Employee";
export default {
  name: 'App',
  components: {
    Employee
  },
  data(){
    return{
      name:'machoul',
      msg:'this is app msg'
    }
  },
  methods:{
    changeMsg(val){
      this.msg =val
    }
  }
}
</script>

子组件

<template>
<div>
  this is employee
  <input type="text" v-model="empMsg">
  <button @click="toChangeMsg">employee 改变App的msg</button>
</div>
</template>

<script>
export default {
  name: "Employee",
  props:['changeMsg'],
  data(){
    return{
      empMsg:''
    }
},
  methods:{
    toChangeMsg(){
      this.changeMsg(this.empMsg)
    }
  }
}
</script>

props传递事件(子–>父)

父组件给子组件绑定一个事件，子组件通过this.$emit()来触发事件传递参数

父组件

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <Employee @testMethod="changeMsg"></Employee>
  </div>
</template>

<script>

import Employee from "./components/Employee";
export default {
  name: 'App',
  components: {
    Employee
  },
  data(){
    return{
      name:'machoul',
      msg:'this is app msg'
    }
  },
  methods:{
    changeMsg(val){
      this.msg =val
    }
  }
}

子组件

<template>
<div>
  this is employee
  <input type="text" v-model="empMsg">
  <button @click="toChangeMsg">employee 改变App的msg</button>
</div>
</template>

<script>
export default {
  name: "Employee",
  data(){
    return{
      empMsg:''
    }
},
  methods:{
    toChangeMsg(){
      this.$emit('testMethod',this.empMsg)
    }
  }
}

在父组件中，除了使用<Employee @testMethod="changeMsg"></Employee>的方式去绑定事件，还可以在mounted()中，使用函数编程的形式去绑定事件。

<!--给子组件添加id-->
<Employee ref="employee"></Employee>

mounted() {
  this.$refs.employee.$on('testMethod',this.changeMsg)
}

如果要给子组件绑定的事件是一次性的，可以通过$once来实现

this.$refs.employee.$once('testMethod',this.changeMsg)

或者

<Employee @testMethod.once="changeMsg"/>

如果想要给子组件绑定原生事件，那么可以通过native来实现

<Employee @testMethod.native="changeMsg"/>

事件的解绑

事件的解绑可以通过$off来实现，具体如下所示

//解绑一个自定义事件
this.$off('testMethod')
//解绑多个自定义事件
this.$off(['testMethod1','testMethod2'])
//解绑全部自定义事件
this.$off()

全局事件总线

全局事件总线称为globalEventBus，是一种适用于任意组件之间通信的一种方式。最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

安装全局事件总线

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

绑定自定义事件

mounted() {
	this.$bus.$on('xxxx',this.xxx)
}

触发自定义事件

this.$bus.$emit('xxxx',var)

消息订阅与发布

通过使用第三方库来实现任意组件之间通信。

使用步骤：

• 安装pubsub：npm i pubsub-js
• 引入：import pubsub from 'pubsub-js'
• 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

使用方法：

• 发布消息

mounted() {
     this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
   }

• 提供数据：

pubsub.publish('xxx',数据)

• 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。