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

Question

//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。(具有一些内容和逻辑)，因此当用户从其中一个 checckbox(一个)中单击复选框时，二)。我应该隐藏内容。

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

引用代码:- https://codepen.io/dhanunjayt/pen/mdBeVMK

Answer 1

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

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