石家庄推广网站,qq空间如何做微网站,做网站一般是怎么盈利,重庆装修设计上篇文章 【Vue】Vue3.0#xff08;二十一#xff09;Vue 3.0中 的$event使用示例 #x1f3e1;作者主页#xff1a;点击#xff01; #x1f916;Vue专栏#xff1a;点击#xff01; ⏰️创作时间#xff1a;2024年11月11日17点30分 文章目录 1. v-model 用于 HTML 标…上篇文章 【Vue】Vue3.0二十一Vue 3.0中 的$event使用示例 作者主页点击 Vue专栏点击 ⏰️创作时间2024年11月11日17点30分 文章目录 1. v-model 用于 HTML 标签时的底层原理2. v-model 用于自定义组件时的底层原理3. 自定义 v-model 修饰符的底层实现4. 与响应式系统的结合 v-model 底层实现的详细解释
1. v-model 用于 HTML 标签时的底层原理
当 v-model 用于普通的 HTML 输入标签如 input typetext时它实际上是一种语法糖背后做了以下几件事
数据绑定 v-model 会将输入框的 value 属性与 Vue 实例中的数据属性进行绑定。在上述 Father.vue 中v-modelusername 会将输入框的 value 和 username 建立双向数据绑定关系。这意味着当 username 的值发生变化时输入框的 value 会自动更新反之亦然。 事件监听 同时v-model 会自动为输入框添加 input 事件监听器。当用户在输入框中输入内容时input 事件会被触发然后事件处理函数会获取输入框的最新值并将其更新到对应的 Vue 实例数据属性中。在底层Vue 会自动处理这个更新过程确保数据的一致性。
2. v-model 用于自定义组件时的底层原理
当 v-model 用于自定义组件如 AtguiguInput时它的实现方式略有不同但遵循一定的约定
modelValue prop 和 update:modelValue 事件 自定义组件需要通过名为 modelValue 的 prop 来接收父组件传递的值这类似于普通 v-model 中的数据绑定部分。在 AtguiguInput.vue 中通过 defineProps([ming, mima]) 接收了父组件传递的 ming 和 mima这里的 ming 和 mima 就类似于 modelValue 的作用用于接收父组件的数据。当子组件内部的数据发生变化时需要通过触发名为 update:modelValue 的自定义事件来通知父组件更新数据。在 AtguiguInput.vue 中通过 emit(update:ming, (HTMLInputElement$event.target).value) 和 emit(update:mima, (HTMLInputElement$event.target).value) 实现了这一点当输入框的 input 事件触发时会将最新的值通过相应的 update 事件传递给父组件。
3. 自定义 v-model 修饰符的底层实现
在 Father.vue 中使用了自定义的 v-model 修饰符 ming 和 mima这是对 v-model 功能的一种扩展
自定义绑定和事件 通过 v-model:mingusername 和 v-model:mimapasswordVue 会将 username 和 password 分别与子组件中的 ming 和 mima 进行绑定并监听对应的 update:ming 和 update:mima 事件来更新数据。这种自定义修饰符的方式允许开发者根据具体需求灵活地定义数据绑定和事件更新的逻辑使得 v-model 在不同的场景下能够更精准地满足业务需求。
4. 与响应式系统的结合
无论是用于 HTML 标签还是自定义组件v-model 的底层实现都与 Vue 的响应式系统紧密结合
数据更新的响应式传播 当输入框的值发生变化并更新了 Vue 实例中的数据属性时Vue 的响应式系统会检测到这个变化并自动触发相关的 DOM 更新操作确保所有依赖于该数据属性的视图部分都能得到及时更新。同样当 Vue 实例中的数据属性在其他地方被修改时绑定的输入框也会相应地更新显示从而实现了数据和视图的双向同步更新保持了整个应用的状态一致性。
综上所述v-model 的底层实现通过数据绑定、事件监听、自定义事件触发以及与响应式系统的协作为开发者提供了一种简洁而强大的双向数据绑定机制无论是在普通的 HTML 表单元素还是自定义组件中都能方便地实现数据与视图之间的交互和同步。
代码示例 AtguiguInput.vue
templateinputtypetext:valueminginputemit(update:ming, (HTMLInputElement$event.target).value)brinputtypetext:valuemimainputemit(update:mima, (HTMLInputElement$event.target).value)
/templatescript setup langts nameAtguiguInput
defineProps([ming, mima])
const emit defineEmits([update:ming, update:mima])
/scriptstyle scoped
input {border: 2px solid black;background-image: linear-gradient(45deg, red, yellow, green);height: 30px;font-size: 20px;color: white;
}
/styleFather.vue
templatediv classfatherh3父组件/h3h4{{ username }}/h4h4{{ password }}/h4!-- v-model用在html标签上 --!-- input typetext v-modelusername --!-- input typetext :valueusername inputusername (HTMLInputElement$event.target).value --!-- v-model用在组件标签上 --!-- AtguiguInput v-modelusername/ --!-- AtguiguInput :modelValueusername update:modelValueusername $event/ --!-- 修改modelValue --AtguiguInputv-model:mingusernamev-model:mimapassword//div
/templatescript setup langts nameFather
import { ref } from vue;
import AtguiguInput from ./AtguiguInput.vue
// 数据
let username ref(zhansgan)
let password ref(123456)
/scriptstyle scoped
.father {padding: 20px;background-color: rgb(165, 164, 164);border-radius: 10px;
}
/style
详解 1.
!-- 使用v-model指令 --
input typetext v-modeluserName!-- v-model的本质是下面这行代码 --
input typetext :valueuserName inputuserName (HTMLInputElement$event.target).value组件标签上的v-model的本质:moldeValue update:modelValue事件。 !-- 组件标签上使用v-model指令 --
AtguiguInput v-modeluserName/!-- 组件标签上v-model的本质 --
AtguiguInput :modelValueuserName update:model-valueuserName $event/AtguiguInput组件中 templatediv classbox!--将接收的value值赋给input元素的value属性目的是为了呈现数据 --!--给input元素绑定原生input事件触发input事件时进而触发update:model-value事件--input typetext :valuemodelValue inputemit(update:model-value,$event.target.value)/div
/templatescript setup langts nameAtguiguInput// 接收propsdefineProps([modelValue])// 声明事件const emit defineEmits([update:model-value])
/script也可以更换value例如改成abc !-- 也可以更换value例如改成abc--
AtguiguInput v-model:abcuserName/!-- 上面代码的本质如下 --
AtguiguInput :abcuserName update:abcuserName $event/AtguiguInput组件中 templatediv classboxinput typetext :valueabc inputemit(update:abc,$event.target.value)/div
/templatescript setup langts nameAtguiguInput// 接收propsdefineProps([abc])// 声明事件const emit defineEmits([update:abc])
/script如果value可以更换那么就可以在组件标签上多次使用v-model AtguiguInput v-model:abcuserName v-model:xyzpassword/
