vue3.0 v-model 的使用

本文主要是介绍vue3.0 v-model 的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

组件功能：把 el-switch 的值 false/true, 动态绑定输出为 0, 1

组件代码

封装el-switch组件，当el-switch的值为false,输出值为0；当el-switch的值为true,输出值为1；

<template><el-switch v-model="switchValue" @change="changeEvent"></el-switch>
</template><script>
export default {name: "Naruto-Switch",props: {value: {type: String,required: true}},watch: {value: {immediate: true,handler(val, oldVal) {if (!val) {this.changeEvent(false);return;}if (val && val !== oldVal) {'0' === val ? this.switchValue = false : this.switchValue = true;}}}},emits: ['update:value'],data() {return {switchValue: false}},methods: {changeEvent(val) {this.$emit(`update:value`, val ? '1' : '0');}}
}
</script>

main.js全局注册组件

import narutoSwitch from './components/Naruto-Switch.vue'
let app = createApp(App);
app.component('my-switch', narutoSwitch);

使用组件

<my-switch v-model:value="item.isPrimary"/>

vue3.0官方v-model语法解释

https://v3.cn.vuejs.org/guide/migration/v-model.html#_2-x-%E8%AF%AD%E6%B3%95

v2笔记

<template><a-select :value="projectVal" @change="handleChange"><a-select-option :value="item.id" v-for="(item, index) in projectDatas" :key="index">{{item.proName}}</a-select-option></a-select>
</template><script>
import { getAction } from '@/api/manage'
import { getCurrentCropId } from '@/utils/util'
export default {name: 'ProjectSelect',props: {value: {type: String}},model: {prop: 'value',event: 'change',},watch: {value(val, oldVal) {console.log('接收到值', val);if (val && val !== oldVal) {this.projectVal = val;}}},data() {return {projectDatas: [],projectVal: null}},mounted() {this.getProject();},methods: {handleChange(val) {this.$emit('change', val);console.log('发送值', val);},getProject () {let params = {pageSize: 1000}getAction(`/project/projectModel/list`, params).then((res) => {if (res.success) {this.projectDatas = res.result.records}})}}
}
</script><style scoped></style>