建立一个网站大约要多少钱,人才招聘网站模板html,用discuz做的门户网站,apache wordpress 伪静态规则在Vue3的组件化开发中#xff0c;父子组件间的通信是核心功能之一。本文将详细介绍五种父组件访问子组件属性/方法的实现方案#xff0c;包含最新的script setup语法糖实践。#xff08;综合1579#xff09;
一、ref defineExpose#xff08;推荐方案#xff0… 在Vue3的组件化开发中父子组件间的通信是核心功能之一。本文将详细介绍五种父组件访问子组件属性/方法的实现方案包含最新的script setup语法糖实践。综合1579
一、ref defineExpose推荐方案
通过组合式API实现精准访问这是Vue3官方推荐的核心方式
!-- 子组件 Child.vue --
script setup
import { ref } from vueconst childData ref(子组件数据)
const childMethod () console.log( 方法被触发)// 必须暴露才能被父组件访问
defineExpose({childData,childMethod
})
/script!-- 父组件 Parent.vue --
templateChild refchildRef /
/templatescript setup
import { ref, onMounted } from vue
const childRef ref(null)onMounted(() {console.log(childRef.value.childData) // 输出子组件数据childRef.value.childMethod() // 触发子组件方法
})
/script
关键点说明
子组件必须通过defineExpose显式暴露属性/方法父组件通过ref.value 访问时需注意生命周期时序支持TS类型推导需配合TypeScript使用7
二、getCurrentInstance备用方案
适用于需要访问组件上下文的高级场景
// 子组件
defineExpose({ customMethod: () {} })// 父组件
import { getCurrentInstance } from vueconst instance getCurrentInstance()
const childComponent instance.refs.childRef
childComponent.customMethod()
注意事项
属于底层API建议优先使用ref方案需要严格保证组件渲染顺序在SSR环境中可能出现问题7
三、事件驱动模式props emit
符合单向数据流原则的通信方式
!-- 子组件 --
script setup
defineProps([modelValue])
const emit defineEmits([update:modelValue])const updateData (val) {emit(update:modelValue, val)
}
/script!-- 父组件 --
Child :modelValueparentData update:modelValuehandleUpdate/
适用场景
需要维持数据单向流动表单组件等需要双向绑定的情况9
四、依赖注入模式provide/inject
解决深层嵌套组件访问问题
// 祖先组件
provide(sharedData, ref(可响应数据))// 后代组件
const data inject(sharedData)
优势
跨多层组件直接访问配合响应式API实现状态共享3
五、状态管理方案Pinia/Vuex
全局状态管理场景下的访问方式
// store/userStore.js
export const useUserStore defineStore(user, {state: () ({ userInfo: null })
})// 任意组件
const store useUserStore()
store.userInfo 全局数据
适用场景
需要跨多组件共享状态复杂应用的状态管理3
注意事项与最佳实践
单向数据流原则优先考虑props/emit方式传递数据封装性保护子组件应明确暴露的最小API集合生命周期时序确保在onMounted之后访问refTypeScript支持使用interface定义暴露类型15
方案对比表
方法适用层级响应式维护成本适用场景ref defineExpose父子✔️低精准方法调用provide/inject跨级✔️中深层组件共享事件驱动父子✔️低数据变更通知状态管理全局✔️高复杂应用状态共享
