老师,我不太理解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对应的值,就是其子组件中modelprop属性值。
父组件通过prop向子组件单向数据传递
当用户输入内容时,触发input事件,然后它触发change1事件,并将input输入的值作为参数传递给change1事件,就会把参数传递给model选项中text1,更新它的值。它与父组件的name关联,从而更新了它的值。
可以理解为change1 = function(v){v = $event.target.value}
子组件通过事件的方式向父组件传递数据。
老师,感觉很绕,还是我的理解有问题?

写回答

1回答

双越

2021-02-24

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

0
3
THEEND0123
非常感谢!
2021-02-24
共3条回复

前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4706 学习 · 1669 问题

查看课程