In Vue components, we often need to access variables defined in child components in the parent component. In Vue 2.x, we can
$refsaccess the subcomponent instance through to access the variables or methods defined in the subcomponent. But in Vue 3.x, due to the introduction of composition API, it$refsis no longer recommended. So in Vue 3.x, how to access variables defined in subcomponents?
Pass data through props
In Vue 3.x, we can props pass data through to access variables defined in child components. For example, suppose a child component defines a message variable that can be accessed via:
Subassembly:
<template>
<div>{
{ message }}</div>
</template>
<script setup>
const message = 'Hello World!'
</script>
parent component:
<template>
<div>
<child-component :message="hello"></child-component>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const hello = ref('Hello World!')
</script>
In the child component, we define a message variable. In the parent component, we display the value of the variable by passing the variable :message="hello" in the parent component hello to the child component and using it in the child component .{
{ message }}message
Refer to child components by ref
In Vue 3.x, we can use ref functions to refer to subcomponent instances, and then access variables or methods defined in subcomponents. For example, suppose a child component defines a message variable that can be accessed via:
Subassembly:
<template>
<div>{
{ message }}</div>
</template>
<script setup>
const message = 'Hello World!'
</script>
parent component:
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)
onMounted(() => {
console.log(childRef.value.message) // 子组件的 message 变量
})
</script>
In the child component, we define a message variable. In the parent component, we use ref a function to create a reactive reference and call it childRef. In onMounted the hook function, we childRef.value access the instance of the child component and get message the variable from it.
Expose variables or methods through defineExpose
In Vue 3.x, we can also use defineExpose functions to expose variables or methods in child components to parent components. For example, suppose a child component defines a message variable that can be accessed via:
Subassembly:
<template>
<div>{
{ message }}</div>
</template>
<script setup>
const message = 'Hello World!'
defineExpose({
message
})
</script>
parent component:
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)
onMounted(() => {
console.log(childRef.value.message) // 子组件的 message 变量
})
</script>
In the child component, we define a message variable and defineExpose expose it to the parent component using a function. In the parent component, we can childRef.value.message access the variables of the child component through message .
Summarize
In Vue 3.x, we can access variables or methods defined in child components through props, ref and . defineExposeAmong them, props it is suitable for data transfer between parent and child components; ref it is suitable for accessing instances in child components, and then accessing variables or methods in child components; defineExpose it is suitable for exposing variables or methods in child components to parent components.