|
大家可能在使用vue的时候已经很熟悉v-model指令了，但是有定制过prop和event吗？下面咱们来简单的说一说。 vue允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 下面通过src引入vue.js文件的方式来简单实现一下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>v-model</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="app"> <my-input v-model="isChecked" value="some value">喜欢学习vue</my-input> </div> </body> </html> <script src="./vue.js"></script> <script> Vue.component('my-input', { template: `<div> <input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)"> <slot></slot> </div>`, model: { prop: 'check', event: 'change' }, props: { value: String, check: 0 // isChecked的值会传递给model指定prop 'check' } }) var app = new Vue({ el: '#app', data: { isChecked: 0 }, watch: { isChecked: function(val) { console.log('val', val); // 选中/取消选中checkbox会改变isChecked的值 } } }) </script> 通过手动选中/取消选中checkbox会触发watch监听，从而不断打印isChecked的当前值。也可以在F12控制台通过给app.isChecked = true/false，来查看checkbox选中和取消选中的效果。至此一个定制prop和event的示例已经完成~~~ 最后给大家准备了一些前端资料分享给大家，如图~ 恳请大家帮忙转发，然后关注走一走，私信我给大家发送资料链接~非常感谢~ 推荐阅读：旗龙 （正文已结束） （编辑：喜羊羊） 免责声明及提醒：此文内容为本网所转载企业宣传资讯，该相关信息仅为宣传及传递更多信息之目的，不代表本网站观点，文章真实性请浏览者慎重核实！任何投资加盟均有风险，提醒广大民众投资需谨慎！ |
