快应用组件通信

最新推荐文章于 2024-05-20 11:40:56 发布

poguanba

最新推荐文章于 2024-05-20 11:40:56 发布

阅读量530

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/poguanba/article/details/134870727

版权

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>

子组件

<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>