四时宝库

程序员的知识宝库

2024年09月22日

Vue组件通信，不再傻傻分不清props,$emit,$on,$refs这些用法了

前言

作为一个十几年开发经验的JAVA后端，对于前端多少也有一点了解，完全让我深入前端的还是自从自己接单给客户做项目后开始的。因为自己一个人干活你必须前后端都懂，不然你的成本就太高。有一段时间在用前端写组件的时候需要组件向其他组件传递数据，当时从网络上查找资料总是参差不齐，每个人说的不一样，但是每个人说的好像又没问题，最后才发现其实这些网络资料不一定是错的，只是资料说的有点片面，没有归纳总结从本质区别上说清楚组件通信的方式。

要我说最喜欢VUE的原因是什么，那肯定就是它的组件设计。组件是VUE中的灵魂，基本90%以上的功能都是基于组件去开发。组件把单一功能高度内聚化了，从而可复用而减少开发工作，用我们后端的化来说就是高内聚低耦合，单一原则。但是单一的组件存在是没有意义的，那就需要多个组件一起配合，所以就有了组件之间的通信机制。

组件的构成及通信关系

VUE中的组件大概分为三类，分别是父组件，子组件，兄弟组件，这个很像我们人类的家族一样。所以就会存在几种通信关系：

  1. 父组件向子组件传递数据
  2. 子组件向父组件传递数据
  3. 子组件向兄弟组件传递送数据
  4. 子组件向所有组件传递数据

基于这几种方式，本文将详细的论证每一种通信方式的使用方法。

父组件向子组件传递数据

父组件向子组件传递数据这个是我们经常用到的场景，很多组件就是基于这个场景去实现。由父向子组件传递数据的方式有两种，一个是通过props,一个是通过$refs去实现。下面例子说明这两种方式的具体应用。

第一种：使用 props 接收父组件数据

首先需要创建一个子组件A，这里命名为 ChildA.vue

<template>
    <div>
      <el-button  type="primary">{{ myName }}</el-button>
       <p><b>老爸发过来数据:</b>{{ fatherData }} </p>
    </div>
</template>
<script>
export default {
    props:{
         fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子A"
        }
    },
    methods: {
    }
}
</script>

然后再创建一个子组件 ChildB.vue

<template>
    <div>
      <el-button  type="primary">{{ myName }}</el-button>
       <p><b>老爸发过来数据:</b>{{ fatherData }} </p>
    </div>
</template>
<script>
export default {
    props:{
         fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子B"
        }
    },
    methods: {
    }
}
</script>

这两个子组件内部都通过props接受父组件传递过来的数据，接着创建一个父组件包含这两个组件，TestParent.vue

<template>
    <div class="app-container">
        <el-row>
            <child-a fatherData="儿子A，你好" />
        </el-row>
        <hr/>
        <el-row>
            <child-b fatherData="儿子B，你好" />
        </el-row>
    </div>
</template>
  
<script>

import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";
export default {
    components: {
        ChildA,
        ChildB
    }
}
</script>

父组件首先通过import把A,B组件导入以后通过components进行注册组件，然后在页面中就可用直接使用组件，通过在组件属性中直接传递参数如

<child-a fatherData="儿子A，你好" /> 这个fatherData 就是在子组件中用props声明的变量

第二种：使用$refs直接更改子组件的数据

子组件 ChildA.vue

<template>
    <div>
      <el-button  type="primary">{{ myName }}</el-button>
    </div>
</template>
<script>
export default {
    props:{
         fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子A"
        }
    },
    methods: {
    }
}
</script>

父组件 TestParent.vue

<template>
    <div class="app-container">
        <el-row>
           <!-- 通过 ref 给组件起一个引用名字-->
            <child-a fatherData="儿子A，你好" ref="childA"/>
        </el-row>
       <el-row>
          <el-button @click="updateChild" type="warning">父亲</el-button>
       </el-row>
    </div>
</template>
  
<script>

import ChildA from "./ChildA.vue";
export default {
    components: {
        ChildA
    },
    data() {
        return {
      
        }
    },
    methods: {
        //主动更新儿子的数据
        updateChild(){
           // 直接通过$refs 引用上面命名的组件名字 调用子组件内部数据和方法
            this.$refs.childA.myName="乖儿子，我要给你改名为AA"
        }
    }
}
</script>

子组件向父组件传递数据

ChildA.vue

<template>
    <div>
      <el-button @click="doClick" type="primary">{{ myName }}</el-button>
    </div>
</template>
<script>
export default {
    props:{
         fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子A"
        }
    },
    methods: {
        doClick(){
           // 子组件的按钮点击事件，通过 $emit发送一个事件和数据
          // myClickEvent是事件名称，后面是事件数据，数据是可选的
            this.$emit("myClickEvent","老爸，我是你儿子A啊")
        }
    }
}
</script>

TestParent.vue

<template>
    <div class="app-container">
        <el-row>
           <!-- 
              在子组件上使用@myClickEvent监听事件，
              其中myClickEvent是子组件中使用$emit发送的事件名称 
              updateToMe 是父组件中用来接收事件的方法
          -->
            <child-a fatherData="儿子A，你好" @myClickEvent="updateToMe" ref="childA" />
        </el-row>
        <hr/>
        <el-row>
            <p><b>儿子给我的数据: </b>{{ toMe }}</p>
        </el-row>
    </div>
</template>
<script>

import ChildA from "./ChildA.vue";
export default {
    components: {
        ChildA
    },
    data() {
        return {
            toMe: ""
        }
    },

    methods: {
        // 接受儿子组件发过来的数据，并更新自己的数据toMe从而刷新父组件视图
        updateToMe(data) {
            this.toMe = data
        }
    }
}
</script>

子组件向兄弟组件传递数据

子组件之间传递数据，需要依赖空的Vue实例配合$on监听实现,首先需要创建一个空的vue实例

Empty.vue

<script>
import Vue from 'vue'
export default new Vue()
</script>

子组件 ChildA.vue

<template>
    <div>
      <el-button @click="doClick" type="primary">{{ myName }}</el-button>
    </div>
</template>
  
<script>
// 导入空的Vue实例
import em from "./EmptyC.vue"
export default {
    props:{
         fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子A",
            brotherData:""
        }
    },

    created() {

    },
    methods: {
        doClick(){
           // 使用this.$emit 向父组件发送事件和数据
            this.$emit("myClickEvent","老爸，我是你儿子A啊")
           // 使用em.$emit 向所有组件发送事件和数据（包括兄弟和父组件)
            em.$emit("myClickEvent","兄弟，我是你哥哥A啊")
        }
    }
}
</script>

子组件 ChildB.vue

<template>
    <div>
      <el-button type="primary">{{ myName }}</el-button>
       <p><b>兄弟给我的数据:</b>{{ brotherData }}</p>
    </div>
</template>
<script>
// 需要引入空的Vue实例
import em from "./EmptyC.vue";
export default {
    props:{
        fatherData:{
            trpe:String
         }
    },
    data() {
        return {
            myName :"我是儿子B",
            brotherData:""
        }
    },
    mounted(){
      // 在页面挂载后使用 em.$on 开始监听子组件发布的事件 
        em.$on("myClickEvent",(d)=>{
            this.brotherData = d
        })
    }
}
</script>

父组件 TestParent.vue

<template>
    <div class="app-container">
        <el-row>
            <child-a fatherData="儿子A，你好"/>
        </el-row>
        <hr/>
        <el-row>
            <child-b fatherData="儿子B，你好" />
        </el-row>
        <hr/>
    </div>
</template>
  
<script>
// 分别导入两个子组件
import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";

export default {
    components: {
        ChildA,
        ChildB
    }
}
</script>

子组件向所有组件传递数据（包括兄弟和父组件)

子组件代码和上面一样，这里需要修改父组件，这种方式父组件可用接收子组件发送给自己的数据，也可用接收子组件给其他组件发送的数据（因为父组件也是一种组件）

<template>
    <div class="app-container">
        <el-row>
            <child-a fatherData="儿子A，你好" @myClickEvent="updateToMe" ref="childA" />
        </el-row>
        <hr/>
        <el-row>
            <child-b fatherData="儿子B，你好" />
        </el-row>
        <hr/>
        <el-row>
            <el-button type="warning">父亲</el-button>
            <p><b>儿子给我的数据: </b>{{ toMe }}</p>
            <p><b>儿子给其他儿子的数据：</b>{{ toOther }}</p>
        </el-row>
    </div>
</template>
  
<script>

import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";
import em from "./EmptyC.vue";

export default {
    components: {
        ChildA,
        ChildB
    },
    data() {
        return {
            toMe: "",
            toOther:""
        }
    },

    mounted() {
        // 通过 em.$on 监听儿子给其他儿子的数据
        em.$on("myClickEvent",(d)=>{
            this.toOther = d
        })
    },
    methods: {
        // 只接受儿子组件发过来的数据
        updateToMe(data) {
            this.toMe = data
        }
    }
}
</script>


总结

vue中组件之间的数据传递可以通过使用props,$emit,$on,$refs,$em.on 多种方式处理，这些方式可用在不同场景下使用。

props: 父组件向子组件传递参数，一般为只读数据

$refs: 父组件直接操作子组件的数据和方法

$emit: 子组件向组件传递数据

$on: 可以接收子组件通过$emit发布的事件和数据

em.$son: 可以接收任何组件通过 em.$emit 发布的事件和数据 这个em是一个空的Vue实例名

标签：mountedvue 

作者:sishi88 , 分类:技术教程 , 浏览:3 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接