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.