【Vue3】21

2023-04-24 13:51| 来源: 网络整理| 查看: 265

1. 原理 v-model 用在自定义组件标签上就是 props 和 emit 的结合，实现了父子之间的双向数据流复制代码 2. 用法 2.1 介绍 (1) 默认情况

相当于

可以看到，绑定的属性名默认为 modelValue，绑定的自定义事件名默认为 update:modelValue

(2) 非默认情况

根据默认情况，可以推出，非默认情况下（自定义属性名）类似的写法

相当于

子组件中，还是用 `defineProps` 接收值，用 `defineEmits` 接收自定义事件同一子组件标签可以多次使用 v-model 复制代码 2.2 使用

父组件中

// App.vue 我是父组件 APP.vue 开关当前状态：flag = {{ flag }} 当前输入值：text = {{ text }} import { ref } from 'vue'; import VModel from './components/VModel.vue'; // 定义属性，准备传入子组件 const flag = ref(true) const text = ref("") 复制代码

子组件中

// VModel.vue 我是子组件 VModel.vue 关闭 // 接收父组件传进来的两个属性 const props = defineProps() // 接收父组件传进来的两个自定义事件 const emit = defineEmits(['update:modelValue', 'update:textVal']) // 点击关闭，触发自定义事件 'update:modelValue'，传回去的值直接赋值给了 modelValue const close = () => { emit('update:modelValue', false) } // input 框输入事件，触发自定义事件 'update:textVal'，传回去的值直接赋值给了 textVal const input = (e:Event) => { let inputEl = e.target as HTMLInputElement emit('update:textVal', inputEl.value) } .dialog{ width: 500px; height: 150px; border: 1px solid #ccc; display: flex; flex-direction: column; justify-content: space-around; padding: 20px; } .dialog input { outline: none; height: 25px; font-size: 16px; } .dialog button { width: 100px; margin: 0 auto; background-color: rgb(254, 211, 131); border: 1px solid transparent; color: white; cursor: pointer; padding: 5px; } .dialog button:hover{ background-color: orange; } 复制代码 2.3 自定义修饰符

举个例子

① 父组件中，在 v-model 后面加上一个自定义的修饰符，比如 .isTrue

② 子组件中，就可以根据修饰符来做对应的操作

// 首先接收一下，语法如下 const props = defineProps() // 接收之后，可以用这个修饰符来做一些事，比如根据 true or false 来返回不同的内容 const input = (e:Event) => { let inputEl = e.target as HTMLInputElement emit('update:textVal', props?.textValModifiers ? inputEl.value + '有修饰符' : inputEl.value + '无修饰符') } 复制代码

小彩蛋：change 事件是失去焦点之后才触发的，可用于单选框，复选框，文件上传等情况。而 input 事件是只要输入框内容发生了变化就触发，不用等到失去焦点。

【本文地址】

公司简介

联系我们