【Vue】使用v-model实现控制子组件显隐

v-model 可以实现双向绑定的效果，允许父组件控制子组件的显示/隐藏，同时允许子组件自己控制自身的显示/隐藏。以下是如何使用 v-model 实现这个需求：

在父组件中，你可以使用 v-model 来双向绑定一个变量，这个变量用于控制子组件的显示/隐藏：

<template>
  <div>
    <button @click="toggleChild">Toggle Child Component from Parentbutton>
    <ChildComponent v-model="showChild" />
  div>
template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: false
    };
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在子组件中，你需要定义一个名为 value 的 props，以便接收来自父组件的 v-model 绑定：

<template>
  <div>
    <button @click="toggleSelf">Toggle Myselfbutton>
    <div v-if="value">I'm the Child Componentdiv>
  div>
template>

<script>
export default {
  props: {
    value: Boolean
  },
  methods: {
    toggleSelf() {
      // 子组件自己控制显示/隐藏状态
      this.$emit('input', !this.value);
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在子组件中，通过 this.$emit('input', ...) 来触发 input 事件，这将影响父组件中 v-model 的绑定值。这样，父组件和子组件都可以独立地控制显示/隐藏状态，实现了双向绑定的效果。