vue2一些语法问题

学习自定义组件使用v-model时有一点语法看不懂 @input="message = $event" 不清楚是什么意思，望指点

父组件: App.vue代码如下

<template>
  <div>
    <h1>自定义组件的v-modelh1>
    <BaseInput v-model="message">BaseInput>
    <BaseInput :value="message" @input="message = $event">BaseInput>
    message: {{message}}
  div>
template>

<script>
import BaseInput from './components/BaseInput.vue';
export default {
  data() {
    return {
      message: "Hello Vue"
    }
  },
  components: {
    BaseInput
  }
}
script>

<style>

style>

子组件 Base Input.vue代码如下:

<template>
  <div>
    <input type="text" :value="value" @input="handleInput">
  div>
template>

<script>
export default {
    props: ['value'],
    methods: {
        handleInput(e) {
            console.log(e.target.value);
            this.$emit('input',e.target.value);
        }
    }
}
script>

<style>

style>

效果图:

问题就是App.vue中 @input="message = $event" 这句话什么意思啊, 直接把$event事件对象赋给message? 子组件传来的是this.$emit('input',e.target.value); input在哪接收了value?

@input是事件，vue事件后可以是函数名，也可以是代码语句，很明显的message = $event是代码语句，就是把message赋值给input事件的参数，需要注意的是，组件的input并不是原生dom的input事件，组件上的input事件的参数是什么，要看子组件传给他的是什么，子组件使用this.$emit('input',e.target.value);触发事件和传递值，input是事件名，后面的e.target.value就是值，然后在父组件把这个值赋值给message

在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

还有一个作用是获取原生DOM事件的事件对象。你这个代码不是 这个作用
看看这个
https://blog.csdn.net/violateer/article/details/108900251

结合起来 就是 把传过来的值 赋值给 message

$event 就是 e.target.value， 相当于做了一个语法糖，把input的值实时赋值给 message 了 。

• 建议你看下这篇博客👉 ：【解决方案】如何在Vue2的工程中书写Vue3语法？

你是自定义组件，所以父子交互有个自定义事件，这时input就是一个事件
this.$emit函数的两个参数分别是（‘事件名称’， 事件值）
所以你父亲组件中$event 等于 emit里面的事件值