1.父组件给子组件传值(props)
props
父组件
<import name="son" src="./son"></import>
<template>
<div class="father">
<text>父组件</text>
<son say="{
{say}}" prop-object="{
{obj}}"></son>
</div>
</template>
<script>
export default {
data(){
return {
say:'hello'
obj:{
name:'child-demo'
}
}
}
}
</script>子组件
<template>
<div class="son">
<text>子组件</text>
<text>{
{ say }}</text>
<text>{
{ propObject.name }}</text>
</div>
</template>
<script>
export default {
props: ['say', 'propObject'],
onInit() {
console.log('父组件传过来的值：', this.say, this.propObject)
}
}
</script>2.子组件给父组件传值(emit, dispath, on)
emit
子组件
<template>
<div class="son">
<text>子组件</text>
<text onclick="son">点击子组件</text>
</div>
</template>
<script>
export default {
data: {
},
son() {
this.$emit('son')
}
}
</script>父组件
<import name="son" src="./son.ux"></import>
<template>
<div class="father">
<text>父组件</text>
<son onson="fatherFunc"></son>
</div>
</template>
<script>
export default {
data: {
},
fatherFunc() {
console.log('父组件方法：子组件被点击')
}
}
</script>
dispath
子组件
<template>
<div class="son">
<text onclick='delHandler'>子组件age:{
{compAge}}</text>
</div>
</template>
<script>
export default {
data(){
return{
compAge:9
}
},
delHandler(){
this.$dispatch('dispatchEvt',{
num:this.compNum
})
},
}
</script>
父组件
<import name="son" src="./son.ux"></import>
<template>
<div class="father">
<text>父组件num:{
{num}}</text>
<son num="{
{num}}"></son>
</div>
</template>
<script>
export default {
data() {
return {
num:20,
}
},
onInit(){
this.$on('dispatchEvt',this.dispatchEvt)
},
dispatchEvt(evt){
this.num = evt.detail.num
},
}
</script>
on
子组件
<import name="son" src="./son.ux"></import>
<template>
<div class="son">
<text>我是子组件age:{
{compAge}}</text>
</div>
</template>
<script>
export default {
data(){
return{
compAge:null
}
},
onInit(){
this.$on('broadevt',this.broadevt)
},
broadevt(evt){
this.compAge = evt.detail.age
}
}
</script>
父组件
<import name="son" src="./son.ux"></import>
<template>
<div class="father">
<text onclick="evtTypeEmit">父组件age:{
{age}}------触发$broadcast()函数</text>
<son></son>
</div>
</template>
<script>
export default {
data() {
return {
age:18,
}
},
evtTypeEmit(){
this.$broadcast('broadevt',{
age:19
})
},
}
</script>
