问题：v-model语法糖在组件上的使用

需要实现效果：如果在一个页面中我们需要引入一个弹窗组件，点击按钮 a显示弹窗，然后点击弹窗的关闭按钮，关闭弹窗，用v-model实现。

使用v-model来进行双向数据绑定的时：

<input v-model="something">

仅仅是一个语法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以在组件中使用的时候，相当于下面的简写：

<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>

所以要组件的v-model生效，它必须：

• 接受一个value属性
• 在有新的value时触发input事件

使用示例（单页应用）：

<template>
	<div class="toggleClassWrap">
	 <modelVue v-if="ifShow" v-model="ifShow"></modelVue>
	</div>
</template>
<script type="text/javascript">
	import modelVue from '../../components/model.vue'
	export default{
		data () {
			return {
				ifShow:true,
			}
		},
		components : {
			modelVue
		}
	}
</script>

model.vue组件

<template>
 <div id="showAlert">
 <div>showAlert 内容</div>
 <button class="close" @click="close">关闭</button>
 </div>
</template>
<script>
 export default{
 props:{
 value:{
 type:Boolean,
 default:false,
 }
 },
 data(){
 return{}
 },
 mounted(){
 
 },
 methods:{
 close(){
 this.$emit('input',false);//传值给父组件, 让父组件监听到这个变化
 }
 },
 }
</script>
<style scoped>
 .close{
 background:red;
 color:white;
 }
</style>

上述只有在工程目录中才方便看到效果，我来改成demo，方便大家：

变动的地方只有modelVue改为model.