Vue 2与Vue 3在自定义组件v-model上的区别

骤雨重山

发布于 2023-04-27 20:23:32

5530

发布于 2023-04-27 20:23:32

文章被收录于专栏：骤雨重山骤雨重山

在vue开发中，通常会对一个自定义的组件进行封装，并实现v-model双向绑定功能

在 Vue 2 中，通常这样实现

父组件

  export default {
    data() {
      return {
        number: 0
      }
    },
    components: {
      Child: () => import("./Child.vue")
    }
  }

子组件

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

在 vue 3 中，通过这样实现

父组件

import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const number = ref(0);
    return {
      number
    };
  },
});

子组件

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    // 更换成了 modelValue
    modelValue: Number
  },
  setup(props, { emit }) {
    // 关闭弹出层
    const handleClick = () => emit('update:modelValue', props.modelValue + 1);
    return { handleClick };
  },
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

default