vue2自定义事件
前言：
众所周知 vue2 中v-model其实就是
:value=“val” @input=“(e) => {val = e.target.value}”
的语法糖，所以只要理解了他其实就是语法糖就好处理了
父组件
<template><div><div>父组件</div><Sun v-model="myVal" @input="handle"></Sun><h2>{{ myVal }}</h2></div>
</template><script>
import Sun from "./test.vue";export default {components: {Sun,},data() {return {myVal: "Hello World",};},methods: {handle: (a) => {debugger;},},
};
</script>
子组件
<template><div><input type="text" :value="value" @input="inputHandle" /></div>
</template><script>
export default {name: "sun",data: () => {return {};},props: {value: {type: String,default: "",},},methods: {inputHandle(e) {debugger;this.$emit("input", e.target.value);},},
};
</script>
子组件用props接收value即语法糖中的 :value=“父组件的传值”
并且在输入框的 input事件中调用 $emit 方法抛出 input 事件，即语法糖中的 :input=“父组件处理方法”
值得注意的是，在自定义组件中使用了v-model的情况下，依旧可以使用 @input来接收回调，此时可以处理其他逻辑。
vue3 自定义事件
前言： vue3自定义事件其实也是语法糖，更像是 .sync的变异写法
父组件
<Sun v-model="myVal" @input="handle"></Sun>
子组件
<input type="text" :value="value" @input="inputHandle" />inputHandle: function （e） {this.$emit('update:input',e.target.value)
}
总结，自定义组件的v-model其实就是语法糖的使用，只要将语法糖完整写出，基本就能理解如何使用了。
)
