vue如何自定义组件v-model

<template>
  <view class="index">
      我是父级组件{{msg}}
      <!-- 相当于：  <node :value="msg" @input="v=>msg=v"></node>-->
      <node v-model="msg"></node>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
import node from"./node.vue"
export default Vue.extend({
  components:{
    node
  },
  data() {
    return {
      msg:"abc",
    };
  },
  mounted() {
    // uni.navigateTo({
    //   url: "/pages/login/login",
    // });
  },
});
</script>
<style scoped>
.index{
  border: solid 1px orange;
}
</style>

<template>
  <view class="node">
    <text>我是子级组件</text>
    <el-input v-model="result" placeholder="请输入内容"></el-input>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    value: {
      type: [String, Number],
    },
  },
  data() {
    return {};
  },
  computed: {
    result: {
      get(): string | number {
        return this.value;
      },
      set(v: string | number) {
        console.log("我执行了");
        this.$emit("input", v);
      },
    },
  },
});
</script>
<style scoped>
.node {
  margin: 50px 0;
  width: 500px;
  border: solid black 2px;
}
</style>

<template>
  <view class="node">
    <text>我是子级组件</text>
    <el-input v-model="result" placeholder="请输入内容"></el-input>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
    model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: [String, Number],
    },
  },
  data() {
    return {};
  },
  computed: {
    result: {
      get(): string | number {
        return this.modelValue;
      },
      set(v: string | number) {
        console.log("我执行了");
        this.$emit("change", v);
      },
    },
  },
});
</script>
<style scoped>
.node {
  margin: 50px 0;
  width: 500px;
  border: solid black 2px;
}
</style>

<template>
  <Child v-model="number"></Child>    
</template>
<script>
  export default {
    data() {
      return {
        number: 0
      }
    },
    components: {
      Child: () => import("./Child.vue")
    }
  }
</script>

<template>
  <button @click="handleClick">{{ value }}</button>
</template>
<script>
  export default {
    props: {
      value: Number
    },
    methods: {
      handleClick() {
        // 通过emit一个input事件出去，实现 v-model
        this.$emit('input', this.value + 1)
      }
    }
  }
</script>

<template>
  <Child v-model="number"></Child>    
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const number = ref(0);
    return {
      number
    };
  },
});
</script>

<template>
  <button @click="handleClick">{{ value }}</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    // 更换成了 modelValue
    modelValue: Number
  },
  setup(props, { emit }) {
    // 关闭弹出层
    const handleClick = () => emit('update:modelValue', props.modelValue + 1);
    return { handleClick };
  },
});
</script>