可以做分析图的地图网站wordpress rce漏洞

可以做分析图的地图网站,wordpress rce漏洞,顺德制作网站价格多少,旅游网站首页设计图片Vue 父子组件的核心交互逻辑围绕「数据向下传递、事件向上触发」展开#xff0c;以下是实际业务中最常用的 5 类场景#xff0c;均基于 Vue3 组合式 API#xff08;主流用法#xff09;演示#xff1a;场景 1#xff1a;父组件向子组件传递数据#xff08;Props#xf…Vue 父子组件的核心交互逻辑围绕「数据向下传递、事件向上触发」展开以下是实际业务中最常用的 5 类场景均基于 Vue3 组合式 API主流用法演示场景 1父组件向子组件传递数据Props业务场景父组件加载列表数据子组件负责展示单条数据如商品卡片、用户信息项。父组件Parent.vuetemplate div classparent h3父组件/h3 !-- 向子组件传递商品数据 -- Child :productproductInfo / /div /template script setup import Child from ./Child.vue // 父组件的数据源 const productInfo { id: 1001, name: Vue实战教程, price: 99, stock: 200 } /script子组件Child.vuetemplate div classchild h4子组件 - 商品展示/h4 p商品ID{{ product.id }}/p p商品名称{{ product.name }}/p p商品价格¥{{ product.price }}/p /div /template script setup // 接收父组件传递的props指定类型增强健壮性 const props defineProps({ product: { type: Object, required: true, // 必传项 default: () ({}) // 默认值防止未传时报错 } }) /script关键说明defineProps是 Vue3 组合式 API 的内置方法无需导入即可使用Props 支持类型校验String/Number/Object/Array 等推荐显式声明便于维护Props 是单向数据流子组件不能直接修改父组件传递的 props需通过事件通知父组件修改。场景 2子组件向父组件传递数据 / 触发事件$emit业务场景子组件的按钮点击、表单提交等操作需要通知父组件处理如子组件点击「减库存」按钮父组件更新库存数据。父组件Parent.vuetemplate div classparent h3父组件 - 库存{{ productInfo.stock }}/h3 !-- 监听子组件触发的reduceStock事件 -- Child :productproductInfo reduce-stockhandleReduceStock / /div /template script setup import Child from ./Child.vue import { ref } from vue // 改用ref声明响应式数据便于修改 const productInfo ref({ id: 1001, name: Vue实战教程, price: 99, stock: 200 }) // 处理子组件触发的减库存事件 const handleReduceStock (num) { if (productInfo.value.stock 0) { productInfo.value.stock - num } else { alert(库存不足) } } /script子组件Child.vuetemplate div classchild h4子组件 - 操作区/h4 !-- 点击按钮触发自定义事件传递参数1 -- button clickhandleClick减少1件库存/button /div /template script setup // 定义子组件可触发的事件 const emit defineEmits([reduce-stock]) // 点击按钮时向父组件触发事件并传递参数 const handleClick () { emit(reduce-stock, 1) // 事件名 传递的参数 } /script关键说明defineEmits用于声明子组件可触发的事件支持数组 / 对象形式对象可做参数校验事件名推荐使用kebab-case短横线命名与模板中的监听格式一致子组件可通过emit传递任意类型的参数数字、对象、数组等。场景 3父组件调用子组件的方法ref业务场景父组件点击按钮触发子组件的内部方法如子组件的表单重置、数据刷新、弹窗关闭。父组件Parent.vuetemplate div classparent h3父组件/h3 button clickcallChildMethod调用子组件的方法/button !-- 给子组件绑定ref标识 -- Child refchildRef / /div /template script setup import Child from ./Child.vue import { ref } from vue // 定义ref引用子组件实例 const childRef ref(null) // 父组件调用子组件方法 const callChildMethod () { // 通过ref访问子组件暴露的方法 childRef.value.resetForm() } /script子组件Child.vuetemplate div classchild h4子组件 - 表单区域/h4 input v-modelinputValue placeholder请输入内容 / /div /template script setup import { ref } from vue const inputValue ref() // 子组件的内部方法 const resetForm () { inputValue.value alert(子组件表单已重置) } // 暴露方法给父组件调用关键 defineExpose({ resetForm }) /script关键说明父组件通过ref绑定子组件获取子组件实例子组件需通过defineExpose显式暴露方法 / 数据父组件才能访问Vue3 默认隐藏子组件内部属性适用于「父组件主动控制子组件行为」的场景避免过度使用优先用 props/emit。场景 4父子组件双向绑定自定义 v-model业务场景自定义表单组件如输入框、开关、下拉框需要和父组件的数据双向同步Vue2 的.sync语法在 Vue3 中已整合为 v-model。父组件Parent.vuetemplate div classparent h3父组件 - 双向绑定值{{ inputValue }}/h3 !-- 自定义v-model绑定 -- Child v-modelinputValue / /div /template script setup import Child from ./Child.vue import { ref } from vue // 父组件双向绑定的数据源 const inputValue ref(初始值) /script子组件Child.vuetemplate div classchild h4子组件 - 自定义输入框/h4 !-- 输入框值变化时触发update:modelValue事件 -- input :valuemodelValue inputemit(update:modelValue, $event.target.value) / /div /template script setup // 接收v-model的默认propsmodelValue const props defineProps([modelValue]) // 定义更新事件update:modelValue是固定命名 const emit defineEmits([update:modelValue]) /script进阶自定义 v-model 名称如果需要多个双向绑定可自定义 v-model 的名称!-- 父组件 -- Child v-model:usernameusername v-model:phonephone / !-- 子组件 -- script setup const props defineProps([username, phone]) const emit defineEmits([update:username, update:phone]) /script场景 5子组件访问父组件$parent不推荐说明Vue 官方不推荐直接使用$parent访问父组件破坏组件封装性仅作了解优先用 props/emit。!-- 子组件中 -- script setup import { getCurrentInstance } from vue // 获取组件实例 const instance getCurrentInstance() // 访问父组件数据/方法 console.log(instance.parent.proxy.productInfo) /script总结核心交互规则父传子用props单向数据流子传父用emit事件触发这是 Vue 父子组件通信的最佳实践父调子方法通过ref defineExpose实现适用于父组件主动控制子组件行为的场景双向绑定Vue3 通过自定义v-modelmodelValue update:modelValue实现替代 Vue2 的.sync语法避免直接使用$parent/$children会降低组件的独立性和可维护性。