一、父组件向子组件通信通过传递属性或者动态属性

//父组件
<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>

其他注意:使用组件树设计项目,配置文件链接各个组件-命名转换

上一篇:VUE学习笔记五:计算属性和数据监听

下一篇:VUE学习笔记七:过渡动画Transition