现在是:
广告热线:  |  设为首页 | 加入收藏
登陆用户名:
密码:
您现在的位置连云港信息网 > 游戏 > >正文内容

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

来源: 发布时间:2020-03-23 07:08: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>

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

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

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

(正文已结束)

推荐阅读:查找我的iphone在哪

免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!

网站简介 - 联系我们 - 营销服务 - 老版地图 - 版权声明 - 网站地图
Copyright.2002-2019 连云港信息网 版权所有 本网拒绝一切非法行为 欢迎监督举报 如有错误信息 欢迎纠正