vue 2 和 vue 3 在自定义组件中如何使用v-model

vue2自定义事件

前言：

（）

众���周知 vue2 中v-model其实就是

:value=“val” @input=“(e) => {val = e.target.value}”

（）

的语法糖，所以只要理解了他其实就是语法糖就好处理了

父组件

父组件
{{ myVal }}
import Sun from "./test.vue";export default {components: {Sun,},data() {return {myVal: "Hello World",};},methods: {handle: (a) => {debugger;},},};

子组件

export default {name: "sun",data: () => {return {};},props: {value: {type: String,default: "",},},methods: {inputHandle(e) {debugger;this.$emit("input", e.target.value);},},};

子组件用props接收value即语法糖中的 :value=“父组件的传值”

并且在输入框的 input事件中调用 $emit 方法抛出 input 事件，即语法糖中的 :input=“父组件处理方法”

值得注意的是，在自定义组件中使用了v-model的情况下，依旧可以使用 @input来接收回调，此时可以处理其他逻辑。

vue3 自定义事件

前言： vue3自定义事件其实也是语法糖，更像是 .sync的变异写法

父组件

子组件

inputHandle: function （e） {this.$emit('update:input',e.target.value)}

总结，自定义组件的v-model其实就是语法糖的使用，只要将语法糖完整写出，基本就能理解如何使用了。