绑定响应式变量

form

下面演示使用 ref 绑定表单数据，注意在 js 代码中要为表单赋值需要使用 formData.value ，但是在 html 模板代码中不需要使用中间属性 value

<el-form :model="formData" label-width="110px">
    <el-form-item label="分类名称：">
        <el-input style="width:100%" v-model="formData.cate_name" />
    </el-form-item>
    <el-form-item label="分类别名：">
        <el-input placeholder="请输入分类别名" v-model="formData.cate_alias" />
    </el-form-item>
</el-form>


let formData = ref({id:0,cate_name: '',cate_alias:''})
formData.value = {...data}

v-model

双向绑定使用 v-model 如下面代码

<el-select v-model="cateId"/>

在 vue2 中上面的语法糖相当于 :value 和 @input 的简写，而在 vue3 中相当于 :modelValue 和 @update:modelValue 的简写，所以自己封装组件时要在自定义组件内部同时实现前面的属性和触发后面的事件，自定义组件实现双向绑定的方法如下（下面代码中移除了自定义组件内查询获取数据的代码，只保留了实现双向绑定的代码 - modelValue 绑定数据 @update:modelValue 更新父组件数据）

<template>
<!-- :modelValue 表示获取父组件传递来的数据，应用到子组件 -->
<!-- @update:modelValue 表示子组件中的 modelValue 变更后触发事件更新父组件中的数据
    后面的参数 $event 即是本自定义组件内的 modelValue 
    自定义组件内不可通过 v-model 直接绑定父组件传递来的参数，要通过此方法拆解 v-model 后实现双向绑定    
	
	modelValue 是双向绑定时使用的默认属性名称，父组件调用方法：
    <CateSelect v-model="cateId"/>
    如果要自定义属性名称则类似如下：（默认名称时 v-model 后面不需要携带属性名称）
	<CateSelect v-model:cid="cateId"/>
    那么在子组件中要实现：
	<el-select :cid="modelValue" @update:cid="emit('update:modelValue', $event)"
    	placeholder="选择分类" style="width: 240px" @change="onChange">
-->
<el-select :modelValue="modelValue" @update:modelValue="emit('update:modelValue', $event)"
    placeholder="选择分类" style="width: 240px" @change="onChange">
    <el-option
        v-for="item in cateList"
        :key="item.id"
        :label="item.cate_name"
        :value="item.id"
    />
</el-select>
</template>
<script setup>
import { ref, onMounted,defineExpose } from 'vue'
import { getCateList$ } from '@/api/article'

defineProps({
    modelValue:{
        type:[Number, String]
    }
})
const emit = defineEmits(['change','update:modelValue']);
</script>

双向绑定时不使用默认属性名称的案例，下面是自定义组件代码：

<template>
<el-select :modelValue="cid" @update:modelValue="emit('update:cid', $event)"
    placeholder="选择分类" style="width: 240px" @change="onChange">
    <el-option
        v-for="item in cateList"
        :key="item.id"
        :label="item.cate_name"
        :value="item.id"
    />
</el-select>
</template>
<script setup>
import { ref, onMounted,defineExpose } from 'vue'
import { getCateList$ } from '@/api/article'

defineProps({
    cid:{
        type:[Number, String]
    }
})
const emit = defineEmits(['change','update:cid']);
</script>

下面是父组件调用代码

<CateSelect v-model:cid="cateId"/>