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)
}
相关推荐
君莫笑11111几秒前
从零到一教你在鸿蒙中实现微信分享--全流程
前端·harmonyos
月亮慢慢圆1 分钟前
项目中路由分模块的设计
前端
华洛10 分钟前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js
zhangxingchao11 分钟前
Jetpack Compose 之 附带效应(SideEffect, 副作用)和 Kotlin协程
前端
啊波次得饿佛哥34 分钟前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
秋天的一阵风1 小时前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风1 小时前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Coffeeee1 小时前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx24062 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js