在vue中组件通信方式其实很多,粗略扳扳手指头不下5种,当然,有的中吹不中用。今天在这里再说一种比较中用nice方式,工作中用起来很方便,之前一直没做个demo总结写上来。通常我们看到v-model都会想到input输入框啥的,其实不仅仅是在input上可以双向数据绑定,同时可以作用在父子组件通信上。
示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <!DOCTYPE html >
<html lang ="zh-cn">
<head >
<meta http -equiv ="Content-Type" content ="text/html; charset=utf-8" />
<title ></title >
<link rel ="stylesheet" type ="text/css" href ="./fontFace.css">
<script crossorigin ="anonymous" integrity ="sha384-+jvb+jCJ37FkNjPyYLI3KJzQeD8pPFXUra3B/QJFqQ3txYrUPIP1eOfxK4h3cKZP"
src ="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head >
<body >
<div id ="app">
<div class="details">
<my -component v -model ='show' style ="border:1px solid #ccc;"></my -component >
<button @click ="changeValue">切换状态 </button >
{{show }}
</div >
</div >
</body >
<script >
Vue .component ('my-component', {
template : ` <div v -if="value">
<p >默认初始值是 {{value }},所以是显示的 </p >
<button @click .stop ="closeDiv">关闭 </button >
</div >` ,
props : ['value'], //这个接收值必须是value,固定的
/*props: {
value: {
type: Boolean,
default: false
},
},*/
methods : {
closeDiv () {
//触发 input 事件,并传入新值,注意,这个input是搭配v-model的固定写法
this .$emit('input', false);
}
}
})
new Vue ({
el : "#app",
data () {
return {
show : true,
}
},
methods : {
changeValue () {
this .show = !this .show
}
}
})
</script>
</html > |
如何改变固定属性value
上面案例中所说的子组件中接收值必须是value,其实vue.js也没有那么笨拙,修改也是可以的,只是代码就没那么清爽了,当然,value作为一个常用关键词,能规避还是规避下比较好,将上面script部分改为下面内容即可!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <script>
Vue.component('my-component', {
template: `<div v-if="zdy">
<p>默认初始值是{{zdy}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
model: {
// props:设置收到父组件v-model绑定的属性名,默认就是value
prop: "zdy",
// event:设置this.$emit的事件名,默认是'input''
event: "zidingyi"
},
// props: ['value'], //这个接收值默认是value
props: {
zdy: {
type: Boolean,
default: false
},
},
methods: {
closeDiv() {
//触发 input 事件,并传入新值,注意,通过v-model方式事件名默认是'input',可以通过model去修改
// this.$emit('input', false);
this.$emit('zidingyi', false);
}
}
})
new Vue({
el: "#app",
data() {
return {
show: true,
}
},
methods: {
changeValue() {
this.show = !this.show
}
}
})
</script> |
效果

小结
通过v-model方式特别简洁清爽,比async修饰符显得更简单,vue上手很简单,熟练乃至精通很难,还是有很多东西可以研究的。
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"Vue.js中v-model父子组件通信双向数据绑定(父子篇)"
最新评论