VUE 切换子组件元素可见性

Posted 2023-02-23

【中文标题】VUE 切换子组件元素可见性

【英文标题】：VUE Toggle child component element visibility

【发布时间】：2021-01-19 04:15:00

【问题描述】：

我正在尝试在子组件中使用 v-if 切换 span 元素的可见性。我基本上是在尝试将@click 切换（Vuetify）与 $refs 一起使用。对代码不是很精通，但我的研究没有找到解决方案。

家长

<v-switch label="hide manufacturer" @click="$refs.childComponent.hideManf()"></v-switch>

<child-component ref="childComponent" />


  components: 
    childComponent

子组件

<span v-if="spanManf">Name to Hide</span>

data() 
    return 
        spanManf: true
    ;
,
methods: 
        hideManf () 
        this.spanManf = !this.spanManf;
    

【参考方案1】：

你应该在你的子组件中使用一个道具，并像这样从父组件传递数据。

<span v-if="visible">Name to Hide</span>

props: 
   visible:  type: Boolean, required: true 

然后在你的父母身上

<child-compoent :visible="spanManf" />

<v-switch label="hide manufacturer" @click="spanManf = !spanManf" />

data() 
   return 
      spanManf: true,
   

【讨论】：

我将 v-if="spanManf" 从您的代码更改为 v-if="visible" ，然后您的解决方案就起作用了。谢谢！