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事件

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

<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>
复制代码