背景
- vue组件数据通信是比较重要的,理清楚方法后基本使用起来没啥问题了。
- 由于方法特别多,所以需要好好整理一下,在合适的场景采取合适的方法才是最重要的。
准备工作
- 迅速测试父子组件就弄个App.vue和child.vue
App.vue
<template>
<div>
<mychild></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
}
}
</script>
child.vue
<template>
<div>i am child</div>
</template>
<script>
export default {
}
</script>
- 如果页面能显示i am child即可成功。
父组件方法或者属性传递给子组件
一、常规方法
- 父组件使用data,在子组件上直接绑属性,子组件通过props获取。
父组件
<template>
<div>
<mychild :n='num'></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
data(){
return {num:100}
}
}
</script>
子组件
<template>
<div>i am child{{n}}</div>
</template>
<script>
export default {
props:{
n:{
type:Number
}
}
}
</script>
- 这种是很常见做法,父组件上通过冒号表示里面传的是data里的值,子组件通过props接收。
- 这个做法有个的缺点,就是传来的值叫啥名得去看父组件上绑的写的是啥。而且也只能传一层。
二、$attrs与$listeners方式
- 使用
$attrs
和$listeners
进行传递。
父组件
<template>
<div>
<mychild :num="num" :father="father" @mouseup="mouseup" @click="myclick"></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
data(){
return {num:100,father:'xcz'}
},
methods:{
mouseup(){
console.log('mouseup');
},
myclick(){
console.log('myclick');
}
}
}
</script>
子组件
<template>
<div>i am child
{{$attrs}}
<grandson v-bind="$attrs" v-on="$listeners"></grandson>
</div>
</template>
<script>
import grandson from './grandson'
export default {
//inheritAttrs:false,//这个配置可以不继承除了class的所有属性
components:{
grandson
},
// props:{//$attrs 默认会拿到除了props,class,style外所有属性
// father:{
// type:String
// }
// }
}
</script>
孙组件
<template>
<div>grandson
{{$attrs}}
<button @mouseup="$listeners.mouseup" @click="$listeners.click">xczsad</button>
</div>
</template>
<script>
export default {
mounted(){
console.log(this.$listeners);
}
}
</script>
- 这个方法有几个地方需要注意:
- 多层传递时,每层需要用v-bind和v-on进行传递,注意没有冒号。
$attrs
有个特性,就是如果中间哪个组件props里接了哪个属性,那么这个值就不会向下传递了。$listeners
有个特性,它不会去获取绑定的原生属性,也就是事件名.native=xxxx
。
三、多层传递给子组件
- 上面二种方法一级级往下传也是可以的,但是如果层级多了那就一团混乱了,有下面方法可以实现多层传递给子组件。
第一种方法
- 暴力解决,使用
this.$children[0]
然后查找到孙组件,直接挂属性等于想要的值或者方法。缺点就是需要知道是第几个孩子,层级多找的累。
第二种方法
- 直接在原型上写个公共方法。注意这个是借用了子组件传递给父组件要绑on和emit的原理,实现父亲调用孙子的方法。
Vue.prototype.$broadcast = function (eventName,value) {
let children = this.$children
function broad(children) {
children.forEach(child => {
child.$emit(eventName,value)
if(child.$children){
broad(child.$children)
}
});
}
broad(children)
}
- 这个方法缺点很明显,它会触发所有子组件绑了相同名字的方法。另外需要注意的是层级问题,虽然是触发的绑在孙组件上的事件,但实际这个监听方法是由其父组件绑的。如果没懂就看下面的子组件传递给父组件第一种常规方法的解读。
第三种方法
- 使用
provide
与inject
父组件
<template>
<div>
<mychild></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
provide(){
return {vmApp:this}
},
methods:{
say(){
console.log('say');
}
}
}
</script>
孙组件
<template>
<div>grandson
</div>
</template>
<script>
export default {
inject:['vmApp'],
mounted(){
console.log(this.vmApp);
}
}
</script>
- 这个使用方法非常暴力,哪里要用直接inject注入就可以了,但这个不推荐使用,其实跟第二种方法有点像,本质是递归往上看父组件哪里有provide,和react的context差不多。
- 这个递归查找有个特性,如果找到了就停止,不会往上继续查找。
第四种方法
- 另外建一个vue实例,在其上面绑定方法和触发方法。俗称eventBus方法。
Vue.prototype.$bus = new Vue()
- 使用就是随便哪个组件去调用它,
this.$bus.on('name',callback)
,然后随便哪个组件去触发它this.$bus.emit('name',value)
- 使用这个方法一定要注意组件之间的加载顺序,如果还没on上事件,就emit,肯定触发不了。
- 我们也可以仿照这个原理自己写一个:
Vue.prototype.$bus = {
obj:{},
on(name,fn){
this.obj[name]=fn
},
emit(name){
this.obj[name]()
}
}
- 实测也是ok的。这样比直接弄个vue实例上去小多了。
子组件方法或属性传递给父组件
一、常规方法
- 由于vue是单向数据流,所以子组件要想改变值,只能是父组件传给子组件来进行改变,但是子组件中可以用个emit来触发父组件的方法。相当于调用vm.on来绑个事件,然后emit进行监听。
父组件
<template>
<div>
<mychild :n='num' @sonChangeNum='changeNum'></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
data(){
return {num:100}
},
methods:{
changeNum(value){
this.num=value
}
}
}
</script>
子组件
<template>
<div>i am child{{n}}
<button @click="change">xxx</button>
</div>
</template>
<script>
export default {
props:{
n:{
type:Number
}
},
methods:{
change(){
this.$emit('sonChangeNum',200)
}
}
}
</script>
- 上面例子就相当于父组件在它自己身上写个changeNum方法,绑到子组件的过程相当于在子组件上on这个方法,push到子组件的一个容器里,容器里有标记’sonChangeNum’。然后子组件进行emit,找到标记,就会执行这个方法,父组件从而收到消息。
const vm = {
arr:[],
on(fn){
this.arr.push(fn)
},
emit(){
this.arr.forEach(fn => fn());
}
}
- 这个方法缺点也很明显。你需要在父组件上写个回调方法等待子组件传值,父组件上on这个方法(在子组件绑定事件),然后去子组件上emit,子组件emit的这个方法同样还要去看父组件绑的名字到底是啥,而且还只能传一层。
- 这个绑定的源码在vue的event.js里,原理跟上面的比就是容器不是数组。它是把父组件的方法放到
_event[key]=value
中,让key等于方法名,然后emit的时候,把_event
对应的value(数组)执行即可。 - 想验证的只要在子组件里
console.log(_event)
就明白了。
二、语法糖方法
- 应该是觉得一里面的绑定有点繁琐,所以出现了几种语法糖写法。本质还是一的方法。
- 首先,我们把常规方法里面绑定换个名字:
父组件
<template>
<div>
<mychild :count="num" @update:count="newVal=>num=newVal"></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
data(){
return {num:100}
}
}
</script>
子组件
<template>
<div>i am child
<button @click="sonClick">xxxx</button>
{{count}}
</div>
</template>
<script>
export default {
props:{
count:{
type:Number,
default:0
}
},
methods:{
sonClick(){
this.$emit('update:count',220)
}
}
}
</script>
- 这样在点击时候和常规方法效果一样,然后我们把名字进行简写。把mychild标签改成:
<mychild :count.sync="num" ></mychild>
- 这样效果也是一样的,也就是说,这个简写,他把子组件要传递的值做成count,绑定事件做成
update:count
,也就是说省去了绑定事件的命名,传的是什么值,那么事件就是update:什么值
。 - 我们可以再把这个名字改一下,把绑的事件名字叫
input
,子组件收到的值叫value
,子组件标签:<mychild :value="num" @input="newVal=>num=newVal" ></mychild>
,把子组件对应的props改value,emit事件改input,这样效果也是一样的。于是这个简写就是v-model
,就等于子组件标签为:<mychild v-model="num" ></mychild>
。相当于绑定事件为input定死,给子组件传的值定死叫value,只要父组件传个值,子组件用value收,要改动就emit input事件即可。当然也有方法可以改v-model
的传递值和事件名。只要在子组件中配置model即可。这个配置就比较人性化,子组件绑的东西就在子组件上配,父组件的东西在父组件上弄就行了。 - v-model的方法跟上面sync简写方法比,sync简写可以传多个,v-model在子组件上只能传一个。
<template>
<div>i am child
<button @click="sonClick">xxxx</button>
{{xxx}}
</div>
</template>
<script>
export default {
model:{
prop:'xxx',
event:'yyy'
},
props:{
xxx:{
type:Number,
default:0
}
},
methods:{
sonClick(){
this.$emit('yyy',220)
}
}
}
</script>
三、ref方法
- ref可以拿到子组件的实例,从而使父组件调用子组件的方法。
父组件
<template>
<div>
<mychild ref="aaa"></mychild>
</div>
</template>
<script>
import child from './child'
export default {
components:{
'mychild':child
},
mounted(){
this.$refs.aaa.say();
}
}
</script>
子组件
<template>
<div>i am child
</div>
</template>
<script>
export default {
methods:{
say(){
console.log('say');
}
}
}
</script>
- 这个方法要注意拿的是时候ref有个s,相当于拿子组件实例。
- 这个方法如果拿多层就得一层层ref,然后
this.refs.aaa.refs.bbb....
- 这个方法不能重名,会覆盖,两个同名的只能取一个。
四、多层传递给父组件
- 由于上面的方法只能一层层传,如果是孙组件需要传给父组件就变得特别麻烦,当然一级一级触发也是可以完成的。
第一种方法
- 首先,可以通过层级关系搞定,一般组件层数不多的话,在孙组件使用
this.$parent
来找到子组件实例进而触发父组件。 - 这种方法缺点很明显,层级如果太多的话,那就写成了
this.$parent.$parent.$parent......
。
第二种方法
- 可以写一个公共逻辑,直接全部触发。
Vue.prototype.$dispatch=function (eventName,value) {
let parent = this
while(parent){
parent.$emit(eventName,value)
parent = parent.$parent
}
}
- 这样就直接顺着往上全找一遍,只要有绑这个名字的事件全部触发。
- 缺点也很明显,你得把所有事件名字起的不一样。并且你触发的名字也得去父组件上看绑的是啥。
第三种方法
- 这个方法跟上面多层父传子的方法里第四种一样,使用另一个vue实例,俗称eventBus。
思考
- 可以看见上面方法那么多,每个都可能有些缺点,所以才出现了vuex,关于vuex,下次整理一下再写出来。
- 总结这个目的主要还是为了在合适的地方用合适的方法。