Vue中父子及非父子组件之间的通信方法
父子组件之间的通信方法
父级->子级通信 (依赖单向数据绑定+props实现)
Vue.component('Father', { //注册了含有data属性的父组件
template: '#father',
data () {
return {
val : 100,
sav : 555
}
},
});
Vue.component('Son', { //注册了没有data的子组件
template: '#son',
});
可见,父级中有val、sav两条数据,如果其子组件可以使用自身的数据,首先需要的就是在子组件内部添加props属性
Vue.component('Son', {
template: '#son',
//props:[数组内可有一个或多个参数]
props: ['val','sav']//props声明即表示该组件会使用父组件的数据
});
为了语义化提升代码的可读性,推荐将参数名与父组件的属性名相同。
在渲染模板上将相应的参数名绑定在子组件上即可:
<template id="father">
<div>
<h4>我是父组件</h4>
<hr>
<!-- 将父组件数据分别绑定在props中声明的参数上 -->
<!-- :props参数名 = '父组件数据' -->
<Son :val = 'val' :sav = 'sav'></Son>
</div>
</template>
<template id="son">
<h4>我是子组件,我拿到了父组件的val:{{val}},以及:{{sav}}</h4>
</template>
浏览器中结果如下:
子级 -> 父级通信 (依赖自定义事件)
和父子通信依靠props属性不同,在子父通信中我们需要使用自定义事件的方法。
Vue中的自定义事件
不同于点击事件、监听事件等等依托一个特定媒介去触发事件内部函数方法,
自定义事件依靠this.$emit()触发事件,例如:
<!-- 通过v-on事件绑定,我们在该标签上绑定了一个自定义方法test -->
<my-component v-on:test="any"></my-component>
//使用this.$emit()触发事件
this.$emit('test')
需要注意的是,Vue文档中提示自定义事件的事件名会在DOM模板中被自动转换为小写。
不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且
v-on
事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以v-on:myEvent
将会变成v-on:myevent
——导致myEvent
不可能被监听到。
使用自定义事件实现子父通信
在父组件中设置自定义事件(父组件内部定义了一个byson方法)
Vue.component('Father', {
template: '#father',
data () {
return {
val : 100,
sav : 555
}
},
methods: {
byson ( val ) { //定义方法
this.val = val;
}
}
});
DOM模板中设定自定义事件,为了更好区分关系自定义事件名设置为’bysons’
<template id="father">
<div>
<input type="text" v-model = 'val'>
<h4>我是父组件</h4>
<hr>
<!-- 在父组件中的子组件上绑定自定义事件byson1,这样就可以在点击事件触发时通过 this.$emit()调用方法 -->
<Son @bysons = 'byson'></Son>
</div>
</template>
子组件中设定事件触发这个自定义事件(这里使用的是点击事件)
Vue.component('Son', {
template: '#son',
data() {
return {
son: 669
}
},
methods: {
press() {
//this.$emit('时间名',可选参数) 此处将子组件私有的son作为参数传递给父组件
this.$emit('byson1', this.son);
}
},
props: ['getFather', 'getSav']
});
将点击事件绑定在子组件后,即可实现子->父通信功能,逻辑如下:
父组件中设定自定义事件 -> 子组件设置点击事件,执行触发父组件中的自定义事件。
非父子组件之间的通信
通过ref链实现
ref是什么
在Vue实例对象下有一个refs属性,其内容包含了所以作用域内组件的具体信息,利用ref实现非父子组件通信的核心逻辑就是通过操作$refs作为一个中间件来进行数据交换。
简单例子:通过点击事件改变一个非父子关系组件的样式
<body>
<div id="app">
<button @click = "getP">get</button>
<p ref = "box"> 123 </p> //在标签中添加ref = 'name'来添加标识
<p ref > 123 </p>
<Hello ref = "hello"></Hello>
</div>
</body>
<script>
Vue.component('Hello',{
template: '<div></div>',
data () {
return {
money: 1000
}
}
})
new Vue({
el: '#app',
methods: {
getP () {
//通过refs操作box的样式
this.$refs.box.style.background = 'red'
}
}
})
</script>
refs的特点:除了对组件有效,$refs对DOM元素也有效,但是它的性能较差,不推荐使用。
更方便高效的思路 — 事件总线
因为$refs性能低下的问题,所以产生了另外一条思路:将数据托管在一个公共(全局属性)的中间件上,这样无论是不是存在父子关系都可以访问的到其内部的数据。
如何实现?
-
全局定义一个公共的Vue实例对象bus,用于存储数据
-
利用自定义事件发布和触发,实现通信
下面例子中,通过中间件bus,实现了非父子组件之间数据的交换:
<body>
<div id="app">
<key-in></key-in>
<print-out></print-out>
</div>
<template id="in">
<!-- 和add属性双向绑定 -->
<input type="text" v-model="add" @keyup.enter="addNew" />
</template>
<template id="out">
<ul>
<li v-for="item in lists">{{ item.text }}</li>
</ul>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
// bus事件总线思维: 将new Vue() 的实例作为全局变量,用来联通非父子组件
var bus = new Vue();
//注册组件
Vue.component("keyIn", {
template: "#in",
data() {
return {
add: ""
};
},
methods: {
addNew() {
//触发bus上的自定义事件pushIn
bus.$emit("pushIn", this.add);
this.add = "";
}
}
});
//输出组件上绑定有一个数据数组用于渲染列表
Vue.component("printOut", {
template: "#out",
data() {
return {
lists: [{
id: 1,
text: "测试"
}]
};
},
mounted() {
//保存指向该组件的this指针
var _this = this;
// $on关键词设定bus上的自定义事件,将新数据push进数组中
bus.$on("pushIn", function (val) {
var list = {
id: _this.lists.length + 1,
text: val
};
_this.lists.push(list);
});
}
});
new Vue({
el: "#app"
});
</script>