老师,我不太理解change1是什么?过程感觉很绕
来源:3-9 vue如何自己实现v-model

THEEND0123
2021-02-23
<p>{{name}}</p>
<CustomVModel v-model="name"/>
<template>
<input type="text"
:value="text1"
@input="$emit('change1', $event.target.value)"
>
</template>
<script>
export default {
// model 配置
model: {
prop: 'text1', // 对应 props 的 text1 属性值(下方)
event: 'change1' // 对应 props 事件名称
},
props: {
text1: String,
default() {
return ''
}
}
}
</script>
$emit('change1', $event.target.value)
触发change1事件,该事件也没具体的实现啊?
我的理解是 =><CustomVModel v-model="name"/>
父组件的name
对应的值,就是其子组件中model
中prop
属性值。
父组件通过prop
向子组件单向数据传递
当用户输入内容时,触发input
事件,然后它触发change1
事件,并将input
输入的值作为参数传递给change1
事件,就会把参数传递给model
选项中text1
,更新它的值。它与父组件的name
关联,从而更新了它的值。
可以理解为change1 = function(v){v = $event.target.value}
子组件通过事件的方式向父组件传递数据。
老师,感觉很绕,还是我的理解有问题?
写回答
1回答
-
change1 就是 event:'change1' 对应起来的,就是这么个规则,vue 就是这么定义的。
032021-02-24
相似问题