©2020-2024 ioDraw All rights reserved,
Privacy Policy
我们都知道Vue作为一个轻量级的低门槛入门前端框架，其核心就是 组件化开发
。Vue就是由多个组件组建成的，组件化是它的精髓，更是它的强大之处。各组件实例之间是相互独立的，这也就意味着不同组件之间数据是无法相互共用。
但实际项目开发中，我们时常需要其他组件的数据，为此诞生了组件通信的问题。针对组件之前的关系：父子、兄弟、子孙的不同选用的数据传输方式也不一样，今天就来做个总结。
Vue2组件通信
父组件向子组件传值
Props
* 父组件以属性的方式传值给子组件
* 子组件通过props方式接收数据 //在父组件中引入子组件并绑定fatherData自定义属性 <Son
:fatherData="fatherData"></Son> <script> import Son from '@/components/son'
export default{ name:'Father', components:{Son}, data(){ return{
fatherData:'我是父组件向子组件传递的值-props方式' } } } </script>
在子组件中使用 props 接收父组件传递的数据，props 里的名字跟父组件定义的属性名一致
但是子组件内想要修改父组件传过来的值却不“污染”父组件的话，可以在子组件内定义一个变量mydata去接收fatherData数据，并使用 watch
监听fatherData数据的变更。
$emit()
* 子组件绑定自定义事件
* 使用 $emit() 触发更改数据 <el-button @click="handleEmit">告诉父组件我要更改数据啦</el-button>
<script> export default{ name:'Son', methods:{ handleEmit(){
this.$emit('triggerEmit','我是来自子组件的数据') } } } </script>
* 父组件定义并绑定子组件传递的triggerEmit事件
* triggerEmit事件名需跟子组件 $emit() 的事件名一致 //使用场景：通用组件更改内部的数据时告知父组件此时数据状态。 <Son
@triggerEmit="changeData"></Son> <script> import Son from '@/components/son'
export default{ name:'Father', components:{Son}, methods:{ changeData(name){
console.log(name) // => 我是来自子组件的数据 } } } </script>
兄弟之间传值
$emit和props结合的方式
* 父组件引入两个子组件
* 父组件充当一个桥梁作用 //在子组件B中接收变量和绑定触发事件 <ChildA :myName="name"></ChildA> <ChildB
:myName="name" @changeName="editName"></ChildB> export default{ data() { return
{ name: '贩卖前端仔' } }, methods: { editName(name){ this.name = name } } } <p>姓名：{{
newName }}</p> <script> export default{ props: { myName:String } } </script>
//至今组件B的更改就通过父组件传达到给组件A完成数据的传递
bus方式
* 创建一个公共的bus.js文件
* 暴露出Vue实例
import Vue from "vue"export default new Vue()在需要组件通信的组件中都引入该文件
<template> <div> <div>我是通信组件A</div> <el-button
@click="changeName">修改姓名</el-button> </div> </template> <script> import {
EventBus } from "../bus.js" export default{ data(){ return{} }, methods:{
changeName(){ EventBus.$emit("editName", '我是传输的数据！') } } } </script>
//另外一个组件中同样引入bus.js文件，通过$on监听事件回调 <template> <div>我是通信组件B</div> </template>
<script> import { EventBus } from "../bus.js" export default{ data(){ return{}
}, mounted:{ EventBus.$on('editName', (name)=>{ console.log(name) })
//输出:我是传输的数据! } } </script> //通过引入bus.js文件，使得EventBus获得Vue实例，其实是跟上一种方式是一样的。