vue自定义组件如何通过v-model指令控制组件的隐藏、显示

<!--child.vue-->
<template>
    <div class="tips_wrap" v-if="showChild">
		我是自定义组件child
    </div>
</template>
<script>
export default {
    model: {
        prop: 'showChild'
    },
    props: {
        showChild: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        closeChild() {
            this.$parent.showChild= !this.$parent.showChild
            // 或者可以这样写,子组件用input事件传递值，父组件直接用v-model里面的属性进行接收
            this.$emit('input', false)
        }
    }
}
</script>

// 引入自定义组件
import Child from '@/components/Child'
// 注册自定义组件
Vue.component('Child', Child)

<template>
    <Child v-model="showChild"></Child>
</template>
<script>
export default {
    data() {
        return {
            showChild: true
        }
    }
}
</script>

<myInput v-model="name" />

<my-input :value="msg" @input="(e)=>{msg=e}"/>

<template>
  <div class="myInput">
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value:{}
  },
};
</script>

model: {
    prop: "xxxxx",
    event: "yyyyy",
  },

<myInput v-model="name" />

<my-input :xxxxx="msg" @yyyyy="(e)=>{msg=e}"/>

<template>
  <div class="myInput">
    <input
      type="text"
      :value="xxxxx"
      @input="$emit('yyyyy', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  model: {
    prop: "xxxxx",
    event: "yyyyy",
  },
  props: {
    xxxxx: String,
  },
};
</script>

<box v-model="isShow"/>

<template>
  <div class="box" @click="hide" v-show="showModal"></div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
    },
  },
  data() {
    return {
      showModal: false,
    };
  },
  watch: {
    value(val) {
      this.showModal = val;
    },
    showModal(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    hide() {
      this.showModal = false;
    },
  },
};
</script>