你可能没用过的v-model 时定制 prop 和 event

itomcoil 2025-01-14 14:21 30 浏览

大家可能在使用vue的时候已经很熟悉v-model指令了，但是有定制过prop和event吗？下面咱们来简单的说一说。

vue允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

下面通过src引入vue.js文件的方式来简单实现一下：

<!DOCTYPE html>

<head>

<title>v-model</title>

</head>

<body>

<my-input v-model="isChecked" value="some value">喜欢学习vue</my-input>

</div>

</body>

</html>

Vue.component('my-input', {

template: `<div>

</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的示例已经完成~~~

最后给大家准备了一些前端资料分享给大家，如图~

恳请大家帮忙转发，然后关注走一走，私信我给大家发送资料链接~非常感谢~

prop()

上一篇：直流电机运转时震动的几个实例，有的解决方法十几年很少遇到
下一篇：【机器学习】优化算法RMSprop是什么?

你可能没用过的v-model 时定制 prop 和 event

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

Win7中同时安装python2和python3的方法

按颜色计数、求和、算平均值或最大值?学这个函数就够啦!

SpringBoot中使用LocalDateTime踩坑记录

FANUC机器人故障诊断-设备名和代码篇

中药古今研究:人参

「mysql第二次安装不了」mysql安装失败怎么清理干净?

RSA 复杂题目 ?

深入理解Python中的try-except语句，避免代码崩溃的噩梦