vue组件详解(三)——组件通信
组件之间通信可以用下图表示:
组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。
一、自定义事件
当子组件需要向父组件传递数据时,就要用到自定义事件。
子组件用$emit ()来触发事件,父组件用$on()来监昕子组件的事件。
父组件可以直接在子组件的自定义标签上使用v-on 来监昕子组件触发的自定义事件,如:
<div id="app9">
<p>总数:{{total}}</p>
<my-component9 @add="getTotal" @cut="getTotal"></my-component9>
</div>
Vue.component('my-component9',{
template: '<div>' +
' <button @click="increase">+1</button>' +
' <button @click="reduce">-1</button>' +
'</div>',
data: function(){
return {
count: 0
}
},
methods:{
increase: function(){
this.count++;
this.$emit('add',this.count) //广播的事件名和数据
},
reduce: function(){
this.count--;
this.$emit('cut',this.count) //广播的事件名和数据
}
}
});
var app9 = new Vue({
el: '#app9',
data:{
total: 0
},
methods:{
getTotal: function(count){
this.total = count;
}
}
});
二、使用v-model
Vue2 .x 可以在自定义组件上使用v-model 指令,直接看一个事例:
<div id="app10">
<p>总数:{{total}}</p>
<my-component10 v-model="total"></my-component10> //这个地方v-model实际是一个语法糖,可以直接理解为接收到广播input里面的数据(this.total=count)。
</div>
Vue.component('my-component10',{
template: '<div>' +
'<button @click="increase">+1</button>' +
'<button @click="reduce">-1</button>' +
'</div>',
data: function(){
return {
count: 0
}
},
methods:{
increase: function(){
this.count++;
this.$emit('input',this.count) //注意这个地方,广播的事件名称为特殊的input
},
reduce: function(){
this.count--;
this.$emit('input',this.count) //注意这个地方,广播的事件名称为特殊的input
}
}
});
var app10 = new Vue({
el: '#app10',
data:{
total: 0
}
});
v-model 还可以用来创建自定义的表单输入组件, 进行数据双向绑定,例如:
<div id="app11">
<p>总数:{{total}}</p>
<my-component11 v-model="total"></my-component11>
<button @click="reduce">-1</button>
</div>
Vue.component('my-component11', {
props: ['value'], //使用v-model的表单组件时,父组件通过value来进行传值
template: '<input :value="value" @input="updateValue">',
methods: {
updateValue: function(event){
this.$emit('input', event.target.value);
}
}
});
var app11 = new Vue({
el: '#app11',
data:{
total: 0
},
methods:{
reduce: function(){
this.total--
}
}
});
父组件的total发生变化时,会通过传递value值,影响子组件input中的value值,而子组件改变自己input中的value值,又会广播给父组件,影响父组件中的total值。
实现这样一个具有双向绑定的v -model 组件要满足下面两个要求:
•接收一个value 属性。 • 在有新的value 时触发input 事件。
三、非父子组件通信
在Vue . 2.x 中, 推荐使用一个空的Vue 实例作为中央事件总线( bu s ),也就是一个中介。
直接看一个事例:
<div id="app12">
<p>{{message}}</p>
<my-component12></my-component12>
</div>
var bus = new Vue();
Vue.component('my-component12',{
template: '<button @click="updateMessage">传递事件信息</button>',
methods: {
updateMessage: function(){
bus.$emit('updateMessage','更新我的组件信息'); //利用中介bus传播事件
}
}
});
var app12 = new Vue({
el: '#app12',
data:{
message: ''
},
mounted: function(){
var _this = this; //这一步赋值必须有
bus.$on('updateMessage',function(data){ //利用中介bus接收事件
_this.message = data;
})
}
});
在app 初始化时,也就是在生命周期mounted 钩子函数里监听了来自bus 的事件updateMessage(mounted挂载这一步相当于在两个组件直间提前安排了一个中介,当两个组件通信时,就可以通过该中介相互传递消息了) ,
而在组件my-component12中,点击按钮会通过bus 把事件updateMessage发出去,此时app 就会接收到来自bus 的事件,进而在回调里完成自己的业务逻辑。
这种方法巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级,而且Vue 1.x 和Vue 2.x 都适用。
四、父链与子组件索引
除了中央事件总线bus 外,还有两种方法可以实现组件间通信:父链和子组件索引。
在子组件中,使用this.$parent 可以直接访问该组件的父实例或组件,父组件也可以通过this.$children 访问它所有的子组件,而且可以递归向上或向下无线访问, 直到根实例或最内层的组件。
4.1父链
<div id="app13">
<p>{{message}}</p>
<my-component13></my-component13>
</div>
Vue.component('my-component13',{
template: '<button @click="updateMessage">通过父链直接修改数据</button>',
methods: {
updateMessage: function(){
this.$parent.message = '来自组件my-component13的内容' //通过this.$parent直接修改父组件的内容
}
}
});
var app13 = new Vue({
el: '#app13',
data:{
message: ''
}
});
尽管V ue 允许这样操作,但在业务中, 子组件应该尽可能地避免依赖父组件的数据,更不应该去主动修改它的数据,因为这样使得父子组件紧藕合,理想情况下,只有组件自己能修改它的状态。
4.2 子组件索引
当子组件较多时, 通过this.$children 来一一遍历出我们需要的一个组件实例是比较困难的,尤其是组件动态渲染时,它们的序列是不固定的。Vue 提供了子组件索引的方法,用特殊的属性ref来为子组件指定一个索引名称。
<div id="app14">
<p>{{message}}</p>
<my-component14 ref="com14"></my-component14>
<button @click="handleRef">通过ref获取子组件实例</button>
</div>
Vue.component('my-component14',{
template: '<div>子组件</div>',
data: function(){
return {
message: '子组件内容'
}
}
});
var app14 = new Vue({
el: '#app14',
data:{
message: ''
},
methods: {
handleRef: function(){
this.message = this.$refs.com14.message; //通过$refs获取子组件实例
}
}
});
在父组件模板中,子组件标签上使用ref 指定一个名称,井在父组件内通过this.$refs 来访问指定名称的子组件。
$refs 只在组件渲染完成后才填充,并且它是非响应式的. 它仅仅作为一个直接访问子组件的应急方案,应当尽量避免在模板或计算属性中使用$refs。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 技巧篇-英文单词首字母大小写转换功能实例演示,字符串切片实现
- 5千字的SpringMVC总结,我觉得你会需要
- 【原创】Java并发编程系列36 | FutureTask
- React Hooks-useTypescript!
- spring-boot项目优雅的http客户端工具,真香!
- 人人都可以学会生存分析(学徒数据挖掘)
- 谈谈const跟Object.freeze()
- Java String类源码阅读笔记
- 别再用JSON配置文件了
- 什么,你一定要基于FPKM标准化表达矩阵做单细胞差异分析
- Tomcat 9最新版安装与使用手册,tomcat更改端口号,tomcat控制台乱码问题解决方法
- Python 技术篇-读取遍历指定路径的文件,区分文件和文件夹
- MySQL蜜罐获取攻击者微信ID
- PyQt5 技巧篇-增加一个类级变量,类级变量的设置方法,类级"常量"设置方法
- PyQt5 技巧篇-按钮隐藏并保留位置,设置按钮的可见度,设置按钮透明度