VUE 切换子组件元素可见性

Question

我正在尝试在子组件中使用 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;
    }

Answer 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,
   }
}