- 父组件-->子组件:通过属性props传值
子组件中定义属性
export default {
props: {
'my-value': [Number, String]
}
}
父组件中绑定此属性(子组件<ComA></ComA>),JS中使用 - 区分大写字母
<com-a :my-value="myVal" @my-event='getMyEvent'></com-a>
data () {
return {
myVal: ''
}
}
- 子组件-->父组件: $emit
子组件:
this.$emit('my-event', this.hello)
父组件:
<com-a :my-value="myVal" @my-event='getMyEvent'></com-a>
- slot 插槽
在父组件中动态向子组件中添加内容or标签
子组件:ComA
<template>
<div>
<slot name='header'>no header</slot>
<p>zhongjainzhi</p>
<slot name='footer'>no footer</slot>
</div>
</template>
父组件:
<com-a :my-value="myVal" @my-event='getMyEvent'>
<p slot='header'>header</p>
<p slot='footer'>footer</p>
</com-a>