网站制作技术使用说明网站权重分析

网站制作技术使用说明,网站权重分析,网页是什么,百度app下载官方免费最新版什么是双向绑定#xff1f; 双向绑定就是#xff1a;父组件的数据变了#xff0c;子组件跟着变#xff1b;子组件修改了#xff0c;父组件也跟着变。就像两个人拉着同一根绑带#xff0c;一个人动#xff0c;另一个人也跟着动。 演变历史 Vue 2 → Vue …什么是双向绑定双向绑定就是父组件的数据变了子组件跟着变子组件修改了父组件也跟着变。就像两个人拉着同一根绑带一个人动另一个人也跟着动。演变历史Vue 2 → Vue 3.0~3.3 → Vue 3.4 v-model defineEmits defineModel .sync修饰符 defineProps (超级简化!)方式一Vue 3.4 之前的写法defineEmits defineProps这是传统写法需要分别定义 props 接收和 emit 发送。父组件template div classparent h2 父组件 - Vue 3.4 之前的双向绑定/h2 p父组件的 message: {{ message }}/p !-- v-model 是语法糖等价于 :modelValuemessage update:modelValueval message val -- ChildOldWay v-modelmessage / !-- 多个 v-model 的写法 -- ChildOldWay v-model:titletitle v-model:contentcontent / /div /template script setup import { ref } from vue import ChildOldWay from ./ChildOldWay.vue const message ref(Hello Vue!) const title ref(文章标题) const content ref(文章内容) /script子组件旧写法template div classchild h3 子组件 - 旧写法/h3 !-- 显示从父组件接收的值 -- p接收到的值: {{ modelValue }}/p !-- 子组件不能直接修改 props 需要通过 emit 通知父组件修改 -- input :valuemodelValue inputupdateValue placeholder输入新值 / button clickemit(update:modelValue, 被子组件修改了) 直接修改 /button /div /template script setup // 第一步用 defineProps 接收父组件的值 const props defineProps({ // v-model 默认绑定的 prop 名是 modelValue modelValue: { type: String, default: }, // 自定义名称的 v-model如 v-model:title title: String, content: String }) // 第二步用 defineEmits 定义事件 // 事件名必须是 update:属性名 的格式 const emit defineEmits([ update:modelValue, // 对应 v-model update:title, // 对应 v-model:title update:content // 对应 v-model:content ]) // 第三步通过 emit 通知父组件更新 const updateValue (event) { // 发射事件让父组件更新数据 emit(update:modelValue, event.target.value) } /script方式二Vue 3.4 新写法defineModelVue 3.4 引入了defineModel大大简化了双向绑定的代码父组件和之前一样template div classparent h2 父组件 - Vue 3.4 新写法/h2 p父组件的 message: {{ message }}/p p父组件的 count: {{ count }}/p !-- 用法和之前完全一样 -- ChildNewWay v-modelmessage v-model:countcount / /div /template script setup import { ref } from vue import ChildNewWay from ./ChildNewWay.vue const message ref(Hello Vue 3.4!) const count ref(0) /script子组件新写法 - 超级简化template div classchild h3 子组件 - Vue 3.4 defineModel/h3 !-- model 就像一个普通的 ref可以直接读写 不需要 :value input直接 v-model 绑定 -- input v-modelmodel placeholder直接双向绑定 / p当前值: {{ model }}/p !-- 多个 model 也很简单 -- button clickcountcount: {{ count }}/button /div /template script setup // // Vue 3.4 的 defineModel一行搞定 // // 默认的 v-model // defineModel() 返回一个 ref可以直接读写 const model defineModel() // 带名称的 v-model:count const count defineModel(count) // 带类型和默认值 // const model defineModel({ type: String, default: 默认值 }) // 就这么简单 // - 不需要 defineProps // - 不需要 defineEmits // - 不需要手动 emit // - 直接读写就能双向绑定 /script对比总结!-- ❌ Vue 3.4 之前繁琐 -- script setup const props defineProps([modelValue]) const emit defineEmits([update:modelValue]) // 使用时emit(update:modelValue, newValue) /script !-- ✅ Vue 3.4 之后简洁 -- script setup const model defineModel() // 使用时model.value newValue直接赋值 /script对比项旧写法 (defineProps defineEmits)新写法 (defineModel)代码量多至少3行少1行复杂度需要理解 emit 机制像普通 ref 一样使用可读性一般非常好Vue版本3.03.4