在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前端进阶，世界如此简单
捧个人场......
评：如果这就是爱情 - 致那些年逝去的青春谢谢您的分享！
评：图表库–ECharts/Highchart基本使用及其参数注解向大佬学习
评：Alt_Blog主题模板安装使用简易教程-附视频教程主题安装好后，后台有开启登录注册功能的，开启后前台就能看到入口
评：碎言碎语网站登录功怎么实现呢
评：碎言碎语如此好文章一定要留下名啊
评：前端黑科技:root之CSS变量var，从此Sass/Less是弟弟（下篇）
电话支持
173xxxx7240在线交流
微信添加
共 0 条评论关于"Vue.js中v-model父子组件通信双向数据绑定（父子篇）"
最新评论