VUE 切换 child 组件元素可见性

Question

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

PARENT

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

<child-component ref="childComponent" />


  components: {
    childComponent
}

CHILD 组件

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

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

Answer 1

您应该在 child 组件中使用 props，并像这样从 parent 传递数据。

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

props: {
   visible: { type: Boolean, required: true }
}

然后在你的 parent

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

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

data() {
   return {
      spanManf: true,
   }
}

VUE 切换 child 组件元素可见性

VUE Toggle child component element visibility

components

toggle

vue.js

vuetify.js