vue--在自定义组件中使用v-model指令解析
2020-01-07 本文已影响0人
花拾superzay
当在自定义组件上使用v-model功能时，需要特殊设计，这里我们以没有任何表征意义的取值，揭示其本质意义，文档最后有参考代码，请结合文章和代码一起理解
首先在组件中需要定义model，有2个属性prop和event。例如model: {prop: 'value', event: 'input'}，prop默认值是 'value'，event默认值是 'input' 。这里为了更透彻的揭示其本质含义，我们不使用它的默认值，使用如下的定义 model: {prop: 'xxxx', event: 'ssss'} 。
当在model中指明了prop后，就要在props下定义同名的属性。model中的event指定了一个事件，当在父组件中使用组件时，可以在组件的标签上使用v-model指令，vue会通过event指定的事件对v-model指令绑定的变量进行更新
最后在组件的template模板中，定义数据的双向绑定逻辑。以input元素为例，绑定v-bind:’xxxx’，以及v-on:input=’$emit(“ssss”,$event.target.value)’两个指令。
参考代码如下，拷贝到本地运行查看效果
<!DOCTYPE html>
<html>
<head>
<title>自定义组件中的v-model指令</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2,maximum-scale=1,user-scalable=yes">
</head>
<body style=''>
<div id='app'>
<my-input v-model="name"> </my-input>
<p>name:{{name}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
//注册组件
Vue.component('my-input', {
model: {
prop: 'xxxx',
event: 'ssss'
},
props: {
xxxx: String
},
template: `<div> <input v-bind:value="xxxx" v-on:input="$emit('ssss', $event.target.value)"/></div>`
});
//使用组件
let model = new Vue({
el: '#app',
data: {
name:'小明'
},
})
</script>
</html>
