VUE学习笔记六:组件通信
一、父组件向子组件通信通过传递属性或者动态属性
//父组件
<componentB number=5>
<p slot="header">123</p>
<p slot="footer">88888</p>
</componentB>
//子组件
{{ number }}
<script>
export default {
// props:['number'],
:{
'number':[Number,String]
},
data () {
return {
hello: 'i am component b'
}
},
methods: {
emitMyEvent () {
this.$emit('my-event',this.hello)
}
}
}
</script>
二、子组件向父组件通信通过emit自定义事件
//父组件
<componentB @my-event="onComaMyEvent"></componentB>
onComaMyEvent (params) {
console.log("onComaMyEvent"+params);
}
}
//子组件
<template>
<div>
{{hello}}
<button @click="emitMyEvent">emit</button>
</div>
</template>
<script>
export default {
data () {
return {
hello: 'i am component b'
}
},
methods: {
emitMyEvent () {
this.$emit('my-event',this.hello) //触发自定义事件
}
}
}
</script>
三、通过Slot进行组件直接的通信
//父组件
<componentB number=5>
<p slot="header">123</p>
<p slot="footer">88888</p>
</componentB>
//子组件
<slot name="header">no data</slot>
<p> no ppppp</p>
<slot name="footer">no data</slot>
其他注意:使用组件树设计项目,配置文件链接各个组件-命名转换
文章
总共 0 条评论