网站首页 > 技术文章 正文
大家可能在使用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的示例已经完成~~~
最后给大家准备了一些前端资料分享给大家，如图~
恳请大家帮忙转发，然后关注走一走，私信我给大家发送资料链接~非常感谢~
猜你喜欢
- 2025-05-02 防止学生查看答案，竟然让Chrome禁止查看源码功能
- 2025-05-02 前端面试必备:JavaScript中call、apply和bind的用法总结
- 2025-05-02 静态网页与动态网页大对决，谁更胜一筹?
- 2025-05-02 WordPress主题大前端DUX v8.3源码下载
- 2025-05-02 DeepSeek只是基操!威联通NAS部署更多AI大模型前端体验
- 2025-05-02 web前端之null和undefined区别（前端怎么处理null）
- 2025-05-02 深入理解谷歌最强V8垃圾回收机制（chrome回收机制）
- 2025-05-02 前端大文件秒传黑科技!程序员集体沸腾
- 2024-09-14 《行云流水线:工作流编排的完美实践》
- 2024-09-14 《Java实现内网穿透:简易教程》
本文暂时没有评论，来添加一个吧(●'◡'●)