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

雨点打透心脏的1/2处 2024-03-24 23:35 42阅读 0赞

#### 目录 ####

*  序言
 *  一、具体实现
 *  二、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 路由 - 组件通信 —＞ 父组件 —＞子组件的参数传值 、父组件触发子组件的函数][Vue - Vue _ - _ _ _ _]

[Vue - Vue _ - _ _ _ _]: https://blog.csdn.net/qq_42701659/article/details/130993266?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22130993266%22,%22source%22:%22qq_42701659%22%7D