老师，我不太理解change1是什么？过程感觉很绕

Question

        <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}
子组件通过事件的方式向父组件传递数据。
老师，感觉很绕，还是我的理解有问题？

Answer 1

双越 2021-02-24 08:42:05

change1 就是 event:'change1' 对应起来的，就是这么个规则，vue 就是这么定义的。

• 提问者 THEEND0123 #1

  那老师，也就是change1 就是 event:'change1' 对应起来，然后调用$emit('change1', $event.target.value)，根据上一步对应关系，text1更新值为$event.target.value。再关联到父级name属性，即实现子组件=> 父组件的数据流？

• 双越 回复 提问者 THEEND0123 #2

  是的。

• 提问者 THEEND0123 #3

  非常感谢！