Vue学习（十六）：组件间通信

1. props

1.1 使用

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
- 第一种方式（只接收）：props:['name']
- 第二种方式（限制类型）：props:{name:String}
- 第三种方式（限制类型、限制必要性、指定默认值）：

props:{name:{type:String, //类型required:true, //必要性default:'张三' //默认值}
}

1.2 注意

此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
问题:
- 如果需要向非子后代传递数据必须多层逐层传递
- 兄弟组件间也不能直接props通信, 必须借助父组件才可以

2. 自定义事件

2.1 绑定事件监听

第一种方式，在父组件中：<Demo @customEvent="test"/>或 <Demo v-on:customEvent="test"/>
第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){this.$refs.demo.$on('customEvent',this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

2.2 触发自定义事件

this.$emit('customEvent',参数)

2.3 解绑自定义事件

this.$off('customEvent')

2.4 注意

组件上也可以绑定原生DOM事件，需要使用native修饰符。
通过this.$refs.xxx.$on('customEvent',回调)绑定自定义事件时，回调要么配置在methods中要么用箭头函数，否则this指向会出问题！

3. 全局事件总线

一种组件间通信的方式，适用于任意组件间通信。

3.1 使用

安装全局事件总线：

new Vue({......beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},......
})

使用事件总线：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){demo(data){......}
}
......
mounted() {this.$bus.$on('xxx',this.demo)
}

提供数据：this.$bus.$emit('xxx',数据)

3.2 注意

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

4. 消息订阅与发布

一种组件间通信的方式，适用于任意组件间通信，使用了pubsub-js库。

4.1 使用

安装pubsub：npm i pubsub-js
引入: import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){demo(data){......}
}
......
mounted() {this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

提供数据：pubsub.publish('xxx',数据)

4.2 注意

最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

5. 插槽slot

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
分类：默认插槽、具名插槽、作用域插槽

5.1 默认插槽

父组件中：

<Category><div>html结构1</div>
</Category>

子组件中：

<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div>
</template>

5.2 具名插槽

父组件中：

<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template>
</Category>

子组件中：

<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div>
</template>

5.3 作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。

父组件中：

<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template>
</Category>

子组件中：

<template><div><slot :games="games"></slot></div>
</template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['英雄联盟','炉石传说','杀戮尖塔','尼尔机械纪元']}},}
</script>

Vue学习（十六）：组件间通信相关推荐

Vue全家桶之组件间的通信（四）
Vue全家桶之组件间的通信(四) 概述组件是Vue中最强大的功能,组件实例之间的数据无法直接相互引用,所以需要掌握组件间通信的方式和技巧. 组件实例之间的关系可以分为父子关系.兄弟关系和隔代关系.针 ...
Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
Vue学习笔记三（组件间通信）
主要通信方式包括: 1.props属性父---->子,子传父也可以通过方法实现,传递的可以是一个数据对象,或者一个方法,是方法的时候子组件调用该方法,通过传参方式将数据传递给父组件. < ...
深入解析Vue组件间通信
React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通信,兄弟间通 ...
vue组件穿方法_vue组件间通信六种方式（完整版）
[51CTO.com原创稿件] 前言组件是 vue.js强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...

Vue学习（十六）：组件间通信

1. props

1.1 使用

1.2 注意

2. 自定义事件

2.1 绑定事件监听

2.2 触发自定义事件

2.3 解绑自定义事件

2.4 注意

3. 全局事件总线

3.1 使用

3.2 注意

4. 消息订阅与发布

4.1 使用

4.2 注意

5. 插槽slot

5.1 默认插槽

5.2 具名插槽

5.3 作用域插槽

Vue学习（十六）：组件间通信相关推荐

最新文章

热门文章