vue.js - 在子组件中以纯文本形式获取 v-if 表达式/数据

Question

嘿那里，

我尝试创建一个基于 v-if 指令显示的自定义 Vue 组件。我还想从组件内部更改指令数据（modalStatus）值。

<modal v-if="modalStatus"></modal>

要更新组件中的数据，我使用与此类似的方法。

closeModal () {
   this.$parent.modalStatus = false
}

问题是有时我不知道数据模型的名称（modalStatus），可以是任何东西。

我的问题是如何从模态组件中获取数据/表达式名称作为纯文本？

我打算使用这样的东西来更新 modalStatus

this.$parent['anyName'] = false

谢谢并保持安全！

稍后编辑。我知道如何使用 props 或 v-model 来完成以上所有工作。我想知道是否可以严格使用 v-if。谢谢！

Answer 1

有几种方法可以从子组件中获取父组件中的方法或属性。

“Vue 方式”是发出一条消息，告诉父级关闭。

将名称作为属性发送

家长

<child modalName='modalStatus' />

孩子

this.$parent[this.modalName]=false

发送一个方法

家长

<child :close='onClose' />

// component method
onClose(){
   this.modalStatus=false
}

孩子

this.close()

发送消息

家长

<child-component @close='modalStatus=false' />

// or call a method
<child-component @close='onClose' />
// component method
onClose(){
  this.modalStatus=false
}

孩子

this.$emit('close')