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

来源:互联网 阅读:- 发布:2020-03-30 12:02:20

大家可能在使用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的示例已经完成~~~

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

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

推荐阅读:小黄鸭键盘