从vuejs中的不同组件单击复选框时如何隐藏内容？答案

【问题标题】：How to hide content when clicked checkbox from different components in vuejs?从vuejs中的不同组件单击复选框时如何隐藏内容？
【发布时间】：2022-07-15 13:27:36
【问题描述】：

//inputtwo.vue

<template>
  <div><input type="checkbox" v-model="checked" />one</div>
</template>

<script>
export default {
  name: "inputtwo",
  components: {},
  data() {
    return {};
  },
};
</script>

//maincontent.vue

<template>
  <div>
    <div class="container" id="app-container" v-if="!checked">
      <p>Text is visible</p>
    </div>
    <common />
  </div>
</template>

<script>
export default {
  name: "maincontent",
  components: {},
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    hidecont() {
      this.checked = !this.checked;
    },
  },
};
</script>

//inputone.vue

<template>
  <div><input type="checkbox" v-model="checked" />one</div>
</template>

<script>
export default {
  name: "inputone",
  components: {},
  data() {
    return {};
  },
};
</script>

如何在 Vuejs 中隐藏不同组件的复选框内容

我有三个组件，称为 inputone（包含带有 v-model 的复选框）、inputtwo（包含带有 v-model 的复选框）、maincontent。（具有一些内容和逻辑），因此当用户单击任一复选框中的复选框时（一个，二）。我应该隐藏内容。

codesanfdbox 链接https://codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/maincontent/maincontent.vue

参考代码：-https://codepen.io/dhanunjayt/pen/mdBeVMK

【问题讨论】：

您想在选中任一复选框时隐藏文本可见内容？
是的。但就我而言，我在两个不同的组件中有复选框。当用户选择任一复选框时。内容“文本可见”应该隐藏。
@HumayonZafar 我可以这样实现它 ----- codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/… （或）任何其他方法吗？

标签： javascript vue.js

【解决方案1】：

您实际上并没有在组件之间同步数据。检查的主要内容永远不会改变。您必须在父组件和子组件之间传递数据，否则这将不起作用。并尝试使用可重用的组件，而不是为同一个复选框创建 inputone 和 inputtwo，而是创建一个通用的复选框组件并将道具传递给它。这是一种很好的做法，并且从长远来看可以使代码库更易于管理。

App.vue

<template>
  <div id="app">
    <maincontent :showContent="showContent" />
    <inputcheckbox text="one" v-model="checkedOne" />
    <inputcheckbox text="two" v-model="checkedTwo" />
  </div>
</template>

<script>
import maincontent from "./components/maincontent/maincontent.vue";
import inputcheckbox from "./components/a/inputcheckbox.vue";

export default {
  name: "App",
  components: {
    maincontent,
    inputcheckbox,
  },
  computed: {
    showContent() {
      return !(this.checkedOne || this.checkedTwo);
    },
  },
  data() {
    return {
      checkedOne: false,
      checkedTwo: false,
    };
  },
};
</script>

复选框组件：

<template>
  <div>
    <input
      type="checkbox"
      :checked="value"
      @change="$emit('input', $event.target.checked)"
    />
    {{ text }}
  </div>
</template>

<script>
export default {
  name: "inputcheckbox",
  props: ["value", "text"],
};
</script>

内容：

  <template>
    <div class="container" id="app-container" v-if="showContent">
            <p>Text is visible</p>
    </div>
  </template>

    <script>
       export default {
           name: "maincontent",
           props: ["showContent"]
         }
    </script>

https://codesandbox.io/embed/confident-buck-kith5?fontsize=14&hidenavigation=1&theme=dark

希望这会有所帮助，您可以在 Vue 文档中了解如何在父组件和子组件之间传递数据：https://v2.vuejs.org/v2/guide/components.html

【讨论】：

谢谢我明白了逻辑。但在我的情况下，我有两个组件，其中复选框来自两个不同组件的循环数组值。我试图将复选框放在两个组件中，即 inputone 和 inputtwo。但我收到错误。 codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/…
尝试创建 inputone 和 inputtwo，并将单个组件用于复选框。通过遵循您的代码。但不工作:(不知道为什么
您遇到什么错误？可以分享一下吗？
出现错误：- 未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
这里是代码：- codesandbox.io/embed/crimson-fog-wx9uo?file=/src/components/…

【解决方案2】：

考虑使用Vuex 来存储和维护复选框的状态。如果你不熟悉 Vuex，它是一个响应式数据存储。数据存储区中的信息可在您的整个应用程序中访问。

【讨论】：