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>