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)
}
相关推荐
木木黄木木26 分钟前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
美食制作家28 分钟前
【无标题】Threejs第一个3D场景
javascript·three
派小汤38 分钟前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket
郁大锤1 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi
HelloRevit2 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
阿珊和她的猫2 小时前
Webpack Dev Server的安装与配置:解决跨域问题
vue.js·webpack
ohMyGod_1232 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day2 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
醋醋2 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特2 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js