v-bind数据绑定,用prop逐层传递
父组件
<template>
//传函数
<childen :toDo="toDo" />
</template>
<script>
...
compontents:{
childen
}
</script>
子组件
<script>
export default{
props:{
toDo:Function
...
}
}
</script>
以下是用自定义事件实现父子组件通信的两个过程:绑定事件监听和触发
监听的两种方式:一是v-on,即@。二是vue对象函数的实例方法$on。
@eventName=“function”
父组件
<template>
// 或
<childen v-on:toDo="toDo" />
</template>
<script>
...
compontents:{
childen
}
</script>
父组件
<template>
<childen ref="child"/>
</template>
<script>
...
mounted(){ //执行异步代码
this.$refs.child.$on('toDo',function)
},
</script>
题外话:监听不是监视,监视是侦查具体属性的变化,可以自动执行。监视分有普通监视computed:{set(){}}和深度监视watch:{}
用$emit触发事件,并返回数据到定义函数中执行回调函数
子组件
<script>
export default {
...
methods:{
const data = ...;
this.$emit('toDo',data)
}
}
</script>
订阅消息和发布消息可以实现跨组件通信,比前几个方式都方便许多,在代码编写上和“ o n 事 件 监 听 + on事件监听+ on事件监听+emit事件触发“格式类似。具体过程如下所示:
先在项目下安装pubsub-js库,库内包含subscribe订阅消息和publish发布消息方法。
npm install --save pubsub-js
在父组件中导入pubsub-js库后,将订阅消息 放在父组件的mounted中,执行异步代码
import PubSub from "pubsub-js"
export default {
mounted(){
PubSub.subscribe('deleteTodo',
(msg,index)=>this.deleteTodo(index)
)
}
}
methods: {
//自定义函数
deleteTodo(index){
console.log(index);
}
}
}
在子组件中同样导入pubsub-js库,然后发布消息
import PubSub from 'pubsub-js'
PubSub.publish('deleteTodo',index)
工作过程可以这样理解:
先在子组件中发布消息,其中deleteTo是消息名,index是通信数据。然后父组件订阅消息deleteTodo(可以理解为接收消息),在订阅消息中的回调函数继续执行具体已定义的函数。
slot,译名插槽、站位。slot可以用来传标签,特别适合标签需要经常反复出现的组件,一个组件可以分好几个站位。
先在子组件emplate中写好插槽,并用name唯一标识插槽。如下所示就是三个不同的slot插槽checkAll、count、delete。
<template>
<div class="todo-footer">
<label>
<slot name="checkAll"></slot>
</label>
<span>
<slot name="count"></slot>
</span>
<slot name="delete"></slot>
</div>
</template>
父组件在子组件中调用需要的插槽,不需要的就不调用。如下所示调用插槽checkAll、delete,未调用插槽count。
<todo-footer>
<input type="checkbox" v-model="isAllCheck" slot="checkAll"/>
<button slot="delete" class="btn" v-show="isShow">完成</button>
</todo-footer>
注意:所有与插槽有关的功能,都应该放在调用插槽结构的页面。如同此例,与v-show相关的isShow函数当放在父组件。