Vue 最简单最好用的组件通信方法 - $ref父组件对子组件发起通信 - $emit子组件对父组件发起通信 - Vue 路由通信 由props 参数发起通信

序言

通过实行了Vue 组件的其他的通信方法，发现最简单最好用的是使用 $ref 方法让父组件对子组件发起通信，Vue 路由则是由 props 参数来获取组件的通信数据。本文只介绍 $ref父组件对子组件发起通信 - $emit子组件对父组件发起通信

一、具体实现

父组件 Father.vue 配置：子组件路径自己自行配置，笔者这里是 ../components/Child

特别注意：

@ 指定的是父组件的接收参数
冒号 : 指定的是子组件的接收参数

<template>

<Child ref="childvue" @childSend="getchildData"></Child>
<button @click="handleClick">触发子组件方法并给子组件发送消息</button>

</template>
<script>
import Child from "../components/Child";

export default {
  name: 'father',
  components: { Child },
  data() {
    return {
    fartherdata: '父组件消息：Father Data ！！！'
    }
  },
   methods: {
   handleClick(){
   	this.$refs.childvue.sendChild(this.fartherdata);
   },
   getchildData(childData){
   	console.log(" -------------------------- 父组件接收到子组件的消息：已收到子组件的消息！！！", childData)
   		}
   }
}
</script>

子组件 Child.vue配置：

<template>
<div>
<p>  ---------------  测试 ---------------  </p>
<p>  这是子组件传递给父组件的参数 {{ childData}} </p>
</div>
</template>
<script>

export default {
  name: 'testchild',
  data() {
    return {
    childData: '子组件消息：Child Data ！！！'
    }
  },
  methods: {
    sendChild(fatherData){
      console.log("--------------- Child GET: ", fatherData)	
      this.$emit('childSend', this.childData); // 给父组件发送消息
    }
  },
}
</script>

二、Vue 路由 - props 参数实现组件通信的方法

具体链接：

Vue - Vue 路由 - 组件通信 —＞ 父组件 —＞子组件的参数传值 、父组件触发子组件的函数