vue双向绑定函数（Vue核心知识5.10v-model语法糖的使用）

vue双向绑定函数（Vue核心知识5.10v-model语法糖的使用）变动的地方只有modelVue改为model.<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);//传值给父组件 让父组件监听到这个变化 }

问题：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.