文档文库

手机版

投诉建议

首页 > HTML5-vue组件通信

HTML5-vue组件通信

发布时间：2019-12-12 13:53:33 来源：文档文库

小中大

字号：

手机查看

组件通信是组件化存在的必然功能，如果没有组件通信，那么组件间将会存在隔阂，无法完成组件数据的传递。正是因为组件通信，才让我们实现了一个又一个的功能。

那么组件通信有哪些，今天我们简单的来介绍下其中常用的三种通信方式

∙ 父子通信

∙ 子父通信

∙ 非父子通信

一、父子组件通信

父子组件通信利用的核心是props属性

子组件代码如下

// 子组件const Child = { template: `

`, props: { msg: String }}

解析：在子组件中，我们可以通过props属性设置子组件中要接收的值的内容，一般写“ prop名字: 值类型 ” 即可。设置完毕后我们就可以在template中使用该值，然后静候父组件传值即可。

父组件代码如下

// 父组件const Parent = { template: `

`, data () { return { msg: “父组件中的内容” } }}

注释：父组件中通过在子组件标签上添加属性即可实现将数据传递的操作。给子组件标签添加“ prop名字: '要传递的值' ”即可完成数据的传值，但是一定不要忘了，如果需要传递动态数据不要忘了给prop名字加冒号。

二、子父组件通信

子父通信的核心就是自定义事件，但为了提高组件的独立性，所以Vue提供了一种很棒的写法

子组件代码如下

// 子组件const Child = { template: `

按钮

`, methods: { clickHandler () { this.$emit("update:msg", "修改后的msg内容") } }}

解析：在子组件中，我们可以通过$emit用于触发自定义事件来触发对应的事件监听函数，但是自定义事件想要触发，我们一般需要在原生事件中进行对应的操作。所以我在点击事件里进行操作，但是具体的情况还需要看具体需求。

父组件代码如下

// 父组件const Parent = { template: `

`, data () { return { msg: “父组件中的内容” } }, methods: { changeMsg (msg) { // 这个msg就是对应子组件传递过来的数据 this.msg = msg } }}

注释：父组件中找到子组件标签后，我们可以通过给组件绑定事件来监听子组件中触发的自定义事件，事件函数中的参数就是我们子组件中传递过来的数据。

三、非父子组件通信

非父子组件通信适合于各种通信方式，其根本原理就是自定义事件，但因为自定义事件需要使用相同的this调用，但不同组件内部的this指向是不同的，所以我们需要引入一个公共的vue实例

公共代码如下

const bus = new Vue() // 为什么要叫bus 当然只要你喜欢，你可以叫任何名字

传递数据的组件代码如下

// 组件1const Com1 = { template: `

按钮

`, methods: { clickHandler () { bus.$emit("update:msg", "修改后的msg内容") } }}

解析：在该组件中，我们可以通过$emit用于触发自定义事件来触发对应的事件监听函数，但是自定义事件想要触发，我们一般需要在原生事件中进行对应的操作。所以我在点击事件里进行操作，但是具体的情况还需要看具体需求。

接收数据的组件代码如下

// 组件2const Com2 = { template: `

`, data () { return { msg: “组件中的内容” } }, created () { bus.$on('update:msg', (msg) => { this.msg = msg }) }}

注释：一般情况下，我们会在created中监听对应的自定义事件，当自定事件触发时，就会将数据传递到$on的位置。

以上就是组件通信中比较常用的三种通信方式，但是针对不同的情况，还会有其他的通信方式，我们接下来的文章中会做对应的讲解。

本文来源：https://www.2haoxitong.net/k/doc/fb8ded6adfccda38376baf1ffc4ffe473368fde8.html

《HTML5-vue组件通信.doc》

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

文档为doc格式

相

关

案

例

HTML5-vue组件通信

相关推荐

推荐内容