在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上手很简单，熟练乃至精通很难，还是有很多东西可以研究的。
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(2)
打赏
下一篇：秒懂ES6-class类的继承与super前端进阶，世界如此简单
共 0 条评论关于"Vue.js中v-model父子组件通信双向数据绑定（父子篇）"
最新评论