vue3:自定义组件使用v-model

首先,在自定义组件里,得有一个名为modelValue的属性,当modelValue变化的时候,触发update:modelValue事件,把新值传给父组件。

子组件:

选项式API写法

javascript 复制代码
<template>
  <div style="width: 100%">
    <t-form labelWidth="70px">
    <t-form-item label="标题">
          <t-input size="small" v-model="modelValue.text" :maxcharacter="52" />
        </t-form-item>
        <t-form-item label="字体">
          <e-font v-model="modelValue.textStyle"/>
        </t-form-item>
        <t-form-item label="位置(X)">
          <e-chart-position v-model="modelValue.left" :direction="'x'" />
        </t-form-item>
        <t-form-item label="位置(Y)">
          <e-chart-position v-model="modelValue.top" :direction="'y'" />
        </t-form-item>
      </t-form>
  </div>
</template>

<script>
import EChartPosition from "@/components/designer/e-chart-position";
export default {
  name:'chart-title',
  components: { EChartPosition },
  props: {
    modelValue: {
      type: Object,
      required: false
    }
  },
  watch:{
    modelValue(newVal){
      this.$emit('update:modelValue', newVal); // 通知父组件更新 modelValue 的值
    }
  }
}
</script>

<style scoped>
</style>

组合式API写法,modelValue前面要加props

javascript 复制代码
<template>
  <div style="width: 100%">
    <t-form labelWidth="70px">
    <t-form-item label="标题">
          <t-input size="small" v-model="props.modelValue.text" :maxcharacter="52" />
        </t-form-item>
        <t-form-item label="字体">
          <e-font v-model="props.modelValue.textStyle"/>
        </t-form-item>
        <t-form-item label="位置(X)">
          <e-chart-position v-model="props.modelValue.left" :direction="'x'" />
        </t-form-item>
        <t-form-item label="位置(Y)">
          <e-chart-position v-model="props.modelValue.top" :direction="'y'" />
        </t-form-item>
      </t-form>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import EChartPosition from "@/components/designer/e-chart-position";
const props = defineProps({
  modelValue: { type: Object, required: false }
})
const emit = defineEmits(['update:modelValue'])
watch(()=>props.modelValue,(newVal)=>{
		emit('update:modelValue', newVal)
	})
</script>

<style scoped>
</style>

父组件调用子组件,特别注意,这里不需要@update之类的了。

html 复制代码
<chart-title v-model="attribute.title" />

当然,可能自定义组件要传给父组件的值,不像我案例里这么简单,需要经过很多处理过程,只需要将处理后的数据用触发update:modelValue自定义事件的方法传过去就可以了,如下:

javascript 复制代码
const updateValue = () => {
  emit('update:modelValue', colorList)
}
相关推荐
crary,记忆几秒前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术6 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪42 分钟前
JQ常规面试题
前端·javascript·面试
海上彼尚42 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师1 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端
Mr...Gan2 小时前
TypeScript
开发语言·javascript·typescript
lilye662 小时前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析