vue3自定义组件使用v-model方式

最新推荐文章于 2024-06-05 15:31:49 发布

嗷呜su

最新推荐文章于 2024-06-05 15:31:49 发布

阅读量1.3k

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43860703/article/details/134818163

版权

本文详细介绍了如何在Vue3中创建自定义组件并利用v-model指令实现父子组件间的双向数据绑定，包括props、emits的使用以及在子组件中的处理方法。

摘要由CSDN通过智能技术生成

在Vue3中，我们可以使用v-model指令在自定义组件中实现双向数据绑定。这篇文章将介绍如何在Vue3中自定义组件并使用v-model方式。
子组件：

<template>
  <el-input v-model="modelData" @change="handleChange"> </el-input>
</template>

<script setup>
import { defineProps, defineEmits, watch, ref } from 'vue';

const props = defineProps({
  modelValue: { type: [String, Number] }
});

const emits = defineEmits(['change', 'update:modelValue']);
const modelData = ref(props.modelValue);
watch(
  () => props.modelValue,
  (n) => {
    modelData.value = n;
  }
);
const handleChange = (params) => {
  // 如果不需要父组件自定义方法 可以直接使用emits('update:modelValue', params)
  emits('change', emits('update:modelValue', params));
};
</script>

父组件调用：

<template>
  <child v-model="inputModel" @change="handleChange" />
</template>
<script setup>
import child from 'xxx/child.vue';

const handleChange = ()=>{
// 自定义监听事件
}
</script>