Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]

核心：v-model实现是通过默认自定义属性value,自定义方法input(Vue2)实现，自定义属性modelValue,自定义方法input(Vue3)实现。。

@input 一般用于监听事件

只要输入的值变化了就会触发input

其实：就是对父传子、子传父。

Vue2.0

关系：

    <v-child v-model="numm"></v-child>
    <!-- 等同于 -->
	 <v-child
      :value="numm"
      @input="(e) => (numm = e.target.value)"
    ></v-child>

流程：子组件props接受value属性，改变使用this.$emit触发input事件并传值，相当于触发父级 @input="(e) => (numm = e.target.value)"

子组件：
model和props需要配合使用获取自定义属性

<template >
  <div class="container">
    <p>我是children组件1</p>
    <input type="text" v-bind:value="msg" @input="change">
  </div>
</template>
<script>
export default {
  model:{
    prop:"msg",
    event:'change'
  },
  props: ["msg"],
  methods: {
    change(e){
      this.$emit('change',e.target.value)
    },
  },
};
</script>
<style  scoped>
.container {
  width: 300px;
  height: 150px;
  border: 2px solid yellow;
  margin: 10px auto;
}
</style>

父组件

<template >
  <div class="container">
    {{msg}}
    <button @click="eventsClick">eventsClick</button>
    <v-children v-model="msg"></v-children>
    <!-- //等同于 -->
    <!-- <v-children v-bind:msg="msg" v-on:change="(e)=>{msg=e}"></v-children> -->
  </div>
</template>
<script>
import vChildren from "../components/children/children";
export default {
  components: { vChildren },
  data() {
    return {
      msg: "我是msg"
    };
  },
};
</script>
<style  scoped>
</style>

Vue3.0

在Vue3中v-model由Vue2中的默认props==》value变成了modelValue
关系：

    <v-child v-model="numm"></v-child>
    <!-- 等同于 -->
	 <v-child
      :modelValue="numm"
      @input="(e) => (numm = e.target.value)"
    ></v-child>

首先看一下我们的子组件：

<template>
  <div>
    我是子组件
    <input  v-model="modelValue" type="text">
     //22222222
    <!-- <input  v-model="modelValue" type="text" @input="changeNumm"> -->
  </div>
</template>

<script>
import { watch } from "vue";
export default {
  name: "App",
  props: {
    modelValue: {
      type: String,
    },
  },
  setup(props, { emit }) {
    console.log("props===", props);
    watch(
      () => props.modelValue,
      (newmodelValue) => {
        emit("update:modelValue", newmodelValue);
      }
    );
    //22222222
    // function changeNumm(e) {
    //    emit("update:modelValue", e.target.value);
    // }
    // return {changeNumm}
  },
};
</script>

modelValue：我们接受父级传来的modelValue变量
改变默认的@input方法，出发我们自己定义的方法；
在自己定义的方法中使用emit触发父级传来的方法update:modelValue

父级组件：

<template>
  <div>
    <p>我是父组件</p>
    <input v-model="numm" type="text" />
    <v-child v-model="numm"></v-child>
  </div>
</template>

<script>
import vChild from "../com/child.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    vChild,
  },
  setup() {
    let numm = ref("66");
    return { numm };
  },
};
</script>

在父组件中通过v-model传入子组件，子组件通过props接收，如果还想改变传来的值并且同步到父级，使用emit来触发v-model默认传来的input事件，来改变，相当于触发父级 @input="(e) => (numm = e.target.value)"