Vue组件通信

文章目录

Vue组件通信前言一、父向子通信1、props通信子组件父组件 2、props验证数据类型(Type)是否必须填写(Required)默认值(Default)实例 二、子向父通信1、事件进行通信子组件父组件 三、兄弟组件通信1、中央事件总线第三方实例子组件父组件

---

前言

由于Vue组件存在嵌套使用，组件间的关系可以分为以下几种：父子、兄弟… 那么组件之间是如何传递参数的呢？

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父向子通信

父组件向子组件传递参数

1、props通信

子组件

子组件中新增props属性，属性值是数组，数组中存放待接收参数列表（定义参数名字） 代码如下（示例）：

let CommonHead={ template:` <div> <h1>我是 {{title}} 的标题</h1> <h2>我是 {{ subTitle }} </h2> </div> `, props:['title',"subTitle"] // 接受来自父组件的状态"title"、"subTitle",可以在CommonHead组件中使用 }

父组件

在父组件中，使用子组件的自定义标签，通过属性的形式传入父组件的数据 代码如下（示例）：

let Home = { template:` <div> <h4>我是home组件</h4> <common-head :title="myTitle" :subTitle=" '我是home组件副标题' "></common-head> // 属性名和子组件props属性中接收列表中的变量名必须相同 // 属性传参可以是静态的: title="这是静态数据" // 也可以是动态的: :title="myTitle"(myTitle是父组件data中的状态) 【:title是v-bind:title的简写】 </div> `, data(){ return { myTitle:"首页组件" } }, components: { CommonHead } }

2、props验证

props通信，没有校验props数据类型，以及必须填写情况、默认值等情况，导致代码不健壮。 为了解决这种状况，我们给props添加验证

数据类型(Type)

StringNumberBooleanArrayObjectDateFunctionSymbol

是否必须填写(Required)

required:true/false 默认值是false

默认值(Default)

default: 默认值

实例

props: { propa:String, // 只验证type(类型)可以直接写类型预定义的值 propb:[String,Number] // type是多个类型中的一个 使用[] propc:{ // 类型为'String',且必须填写，不能为空 type:String, required:true }, propd:{ // 类型为'String'，且默认值为'xxx' type:String, default:'xxx' } } // 此时props的值不在是数组，而是对象

【说明】

props中定义的参数名会自动 编译成 实例（组件）属性（同data中的属性以及计算属性中的属性）props里属性名不能和data中以及methods和计算属性等里的内容重名数据类型为引用数据类型(Array/Object)时,默认值必须是一个函数的返回值,形成闭包，生成自己单独的作用域props不能在子组件中直接改变值（单向数据流）【易于维护】

二、子向父通信

子组件向父组件传递参数

1、事件进行通信

通过事件弹射形式进行通信

子组件

子组件通过事件弹射将携带参数传递到父组件上 代码如下（示例）：

let son = { template: ` <div> 子组件 <button @click='biu'>点击<button> </div> `, data () { return { msg: '这是子组件的值!' } }, methods: { biu () { # this.$emit('自定义事件名',携带参数) this.$emit('piu',this.msg) // 弹射一个自定义事件，并携带参数 // 当click事件触发执行biu函数，子组件会弹射触发事件piu，并执行相应的事件处理函数fn // click触发-》执行biu()-》弹射piu-》执行fn } } }

父组件

在父组件通过形参获取到子组件传递过来的参数 代码如下（示例）：

let father = { template: ` <div> 父组件 <son @piu='fn'><son> </div> `, methods: { fn (msg) { alert(msg) // 参数即为子组件传来的数据 } }, components: { son } }

三、兄弟组件通信

兄弟组件间传递参数

1、中央事件总线

原理：利用一个第三方的 实例 进行弹射事件和监听事件 弹射事件：第三方实例.$emit(“自定义事件名”,携带的参数) 监听事件：第三方实例.$on(“自定义事件名”,回调函数)

let eventBus = new Vue(); // 定义的第三方实例 eventBus.$emit("自定义事件名",携带的参数) eventBus.$on("自定义事件名",回调函数)

第三方实例

let eventBus = new Vue(); // 第三方实例 -- 负责弹射和监听事件

子组件

子组件依赖第三方实例，通过事件弹射将携带参数传递 子组件1（示例）：

let CommonTitle1 = { template:` <div> 子组件1 <button @click="biubiubiu">点击传数据</button> </div> `, data(){ return { msg:"我是子组件1的数据" } }, methods:{ biubiubiu(){ eventBus.$emit("piu",this.msg) // 通过第三方实例弹射事件 } } }

子组件2（示例）：

let CommonTitle2 = { template:` <div> 子组件2 {{msg}} </div> `, mounted(){ // 通过第三方实例监听事件 eventBus.$on("piu",(msg)=>{ this.msg = msg; }) }, data(){ return { msg:"我是子组件2的数据" } } }

父组件

在父组件依赖第三方实例，监听事件获取传递过来的值 代码如下（示例）：

let Home = { template:` <div> home页内容 <common-title1></common-title1> <hr/> <common-title2></common-title2> </div> `, components:{ CommonTitle1, CommonTitle2 } }