在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，其实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上手很简单，熟练乃至精通很难，还是有很多东西可以研究的。
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
下一篇：秒懂ES6-class类的继承与super前端进阶，世界如此简单
一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，梦想一旦被付诸行动，就会变得神圣，愿景：成为宇宙中最具有代表性的前端技术类博客。主题源码 
666,主题漂亮简洁
评：碎言碎语怎么可能只能一天，我自己网站不是已经有吗，用英文状态下逗号分开追加就是，例如：[{time:...
评：碎言碎语其实想知道如何在后台写时光机（如何添加另一天，只能写这一个吗，接下来的怎么写） [{time...
评：碎言碎语本大仙到此一游
评：阿里云官网(2017年)首页波纹动画案例不定期来看看，大佬就是是我前进的方向
评：碎言碎语成年人的世界没有容易二字!
评：成年人的世界没有容易二字，从来都是各有各的隐晦和皎洁
共 0 条评论关于"Vue.js中v-model父子组件通信双向数据绑定（父子篇）"
最新评论