在子组件中获取 v-if expression/data 作为纯文本

Get v-if expression/data as plain text in child component

你好,

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

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

要更新来自组件的数据,我使用与此类似的方法。

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

问题是有时我不知道数据模型的名称 (modalStatus),可以是任何名称。

我的问题是如何从模态组件中以纯文本形式获取 data/expression 名称?

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

this.$parent['anyName'] = false

谢谢,注意安全!

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

有几种方法可以从 child.

获取 parent 组件中的方法或 属性

'Vue Way' 是发出一条消息告诉 parent 关闭。

将姓名作为 属性

发送

Parent

<child modalName='modalStatus' />

Child

this.$parent[this.modalName]=false

发送方法

Parent

<child :close='onClose' />
// component method
onClose(){
   this.modalStatus=false
}

Child

this.close()

发出消息

Parent

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

Child

this.$emit('close')