el-dialog 子组件无法通过$parent 访问父组件方法属性 解决方法

  • 需求: 子组件需要动态获取父组件某个属性或者动态调用父组件方法
// 父组件
<template>
   <el-dialog>
        <son @return-prop="getName"/>
    </el-dialog>
</template>
<script>
...
  data() {
    return {prop: 'parent'}
  },
  methods:{
      getName(callback){
        ... 
        callback(this.prop) //调用此回调
      }
  }
...
</script>

子组件 son 通过emit 传参(回调)进行处理

<template>
   <div v-text="name"/>
</template>
<script>
...
  data() {
    return {name: ''}
  },
  methods: {
      handleClick() {
        console.log(this.$parent) // VueComponent el-dialog
        console.log(this.$parent.name) // undefined 这里name只是做示例,实际业务中,我在子组件中想获取dialog 某个动态属性,无法获取才发现的这个问题
        this.$emit('return-prop', prop=> { this.name = prop})
      }
  }
...
</script>
posted @ 2022-08-10 16:21  卑面派对  阅读(424)  评论(0编辑  收藏  举报