在开发项目的过程中，我们通常会有自定义组件的时候，那么在自定义组件后，我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示、隐藏组件的功能效果呢？好吧~接下来我直接上代码

（1）新建一个叫child.vue的vue组件文件，内容如下：

<!--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>

（2）将这个组件注册在全局，方便直接使用，也可以不注册，在main.js文件里面引入并注册：

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

（3）在父组件文件里面写入Child组件，并加上v-model="showChild"：

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

好了，到此实现自定义组件通过v-model指令控制组件的隐藏、显示