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)
}
相关推荐
爱生活的苏苏13 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪15 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星21 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.32 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁38 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶38 分钟前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒2 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq22 小时前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端