In vue3, the way the child component uses the value of the parent component has changed. After receiving it with props, it cannot be called through this.xxx in the setup.
Let's take a look at the value passing between vue2 parent and child
father to son
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<hr />
-
<son :value="parentValue">
</son>
-
</div>
-
</template>
-
<script>
-
import son
from
'./components/son.vue'
-
export
default {
-
components: { son },
-
data () {
-
return {
-
parentValue
: 'The value passed from the parent to the child'
-
}
-
}
-
}
-
</script>
Subcomponents receive via props
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
</div>
-
</template>
-
<script>
-
export
default {
-
props: [
'value']
-
}
-
</script>
child's father
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<div>{
{ parentValue }}
</div>
-
<hr />
-
<son @handle="handel">
</son>
-
</div>
-
</template>
-
<script>
-
import son
from
'./components/son.vue'
-
export
default {
-
components: { son },
-
data () {
-
return {
-
parentValue
: 'The value passed from the parent to the child'
-
}
-
},
-
methods: {
-
handel (value) {
-
this.
parentValue = value
-
}
-
}
-
}
-
</script>
The child component triggers the event in the parent component to pass the value to the parent component through $emit
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
< button @ click = "fn" >
Click to pass value to parent component </ button >
-
</div>
-
</template>
-
<script>
-
export
default {
-
methods: {
-
fn () {
-
this
.$emit( 'handle' , 'The value passed from the child to the parent' )
-
}
-
}
-
}
-
</script>
Next, look at the passing value of vue3
father to son
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<hr />
-
<son :value="parentValue">
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
const
parentValue = ref ( 'The value passed from the parent component to the child component' )
-
return { parentValue }
-
}
-
})
-
</script>
Since there is no this in the setup of vue3, we want to use the value passed from the parent component in the setup, with the help of the first parameter of the setup function
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent }
from
'vue'
-
-
export
default
defineComponent({
-
props: [
'value'],
-
setup (props, context) {
-
console
. log (props. value ) // the value passed from the parent component to the child component
-
}
-
})
-
</script>
child's father
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
{
{ parentValue }}
-
<hr />
-
<son @handle="handle">
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
let
parentValue = ref ( 'The value passed from the parent component to the child component' )
-
const
handle = value => {
-
parentValue.
value = value
-
}
-
return { parentValue, handle }
-
}
-
})
-
</script>
The child triggers the method passing value in the parent component through emit
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
< button @ click = "fn" >
Click to change the value of the parent component </ button >
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
-
export
default
defineComponent({
-
setup (props, context) {
-
const
fn = (
) => {
-
context.emit ( 'handle' , 'The value passed from the child component to the parent component' )
-
}
-
return { fn }
-
}
-
})
-
</script>
provide and inject
Vue3 also provides us with provide and inject. We can expose properties or methods through provide in the parent component, and the child component accepts it through inject, and as long as it is a descendant of the parent component, it can receive the value exposed by the parent component through inject.
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
{
{ parentValue }}
-
<hr />
-
<son>
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, provide, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
// pass value
-
let
parentValue = ref ( 'value in parent' )
-
provide(
'parentValue', parentValue)
-
// pass method
-
const
handle
= ( sonValue: any ) => {
-
parentValue.
value = sonValue
-
}
-
provide(
'handle', handle)
-
return { parentValue }
-
}
-
})
-
</script>
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
< button @ click = "fn" >
Click to modify the value of the parent component </ button >
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, inject }
from
'vue'
-
-
export
default
defineComponent({
-
setup () {
-
const
value = inject ( 'parentValue' ) // use the value passed from the parent component
-
const
handle: any =
inject(
'handle')
-
// Modify the value of the parent component
-
const
fn = (
) => {
-
handle
( 'Modify the value of the parent component' )
-
}
-
return { value, fn }
-
}
-
})
-
</script>
In vue3, the way the child component uses the value of the parent component has changed. After receiving it with props, it cannot be called through this.xxx in the setup.
Let's take a look at the value passing between vue2 parent and child
father to son
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<hr />
-
<son :value="parentValue">
</son>
-
</div>
-
</template>
-
<script>
-
import son
from
'./components/son.vue'
-
export
default {
-
components: { son },
-
data () {
-
return {
-
parentValue
: 'The value passed from the parent to the child'
-
}
-
}
-
}
-
</script>
Subcomponents receive via props
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
</div>
-
</template>
-
<script>
-
export
default {
-
props: [
'value']
-
}
-
</script>
child's father
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<div>{
{ parentValue }}
</div>
-
<hr />
-
<son @handle="handel">
</son>
-
</div>
-
</template>
-
<script>
-
import son
from
'./components/son.vue'
-
export
default {
-
components: { son },
-
data () {
-
return {
-
parentValue
: 'The value passed from the parent to the child'
-
}
-
},
-
methods: {
-
handel (value) {
-
this.
parentValue = value
-
}
-
}
-
}
-
</script>
The child component triggers the event in the parent component to pass the value to the parent component through $emit
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
< button @ click = "fn" >
Click to pass value to parent component </ button >
-
</div>
-
</template>
-
<script>
-
export
default {
-
methods: {
-
fn () {
-
this
.$emit( 'handle' , 'The value passed from the child to the parent' )
-
}
-
}
-
}
-
</script>
Next, look at the passing value of vue3
father to son
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
<hr />
-
<son :value="parentValue">
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
const
parentValue = ref ( 'The value passed from the parent component to the child component' )
-
return { parentValue }
-
}
-
})
-
</script>
Since there is no this in the setup of vue3, we want to use the value passed from the parent component in the setup, with the help of the first parameter of the setup function
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent }
from
'vue'
-
-
export
default
defineComponent({
-
props: [
'value'],
-
setup (props, context) {
-
console
. log (props. value ) // the value passed from the parent component to the child component
-
}
-
})
-
</script>
child's father
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
{
{ parentValue }}
-
<hr />
-
<son @handle="handle">
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
let
parentValue = ref ( 'The value passed from the parent component to the child component' )
-
const
handle = value => {
-
parentValue.
value = value
-
}
-
return { parentValue, handle }
-
}
-
})
-
</script>
The child triggers the method passing value in the parent component through emit
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
< button @ click = "fn" >
Click to change the value of the parent component </ button >
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, ref }
from
'vue'
-
-
export
default
defineComponent({
-
setup (props, context) {
-
const
fn = (
) => {
-
context.emit ( 'handle' , 'The value passed from the child component to the parent component' )
-
}
-
return { fn }
-
}
-
})
-
</script>
provide and inject
Vue3 also provides us with provide and inject. We can expose properties or methods through provide in the parent component, and the child component accepts it through inject, and as long as it is a descendant of the parent component, it can receive the value exposed by the parent component through inject.
-
<template>
-
<div>
-
< h1 >
parent component </ h1 >
-
{
{ parentValue }}
-
<hr />
-
<son>
</son>
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, provide, ref }
from
'vue'
-
import son
from
'./components/son.vue'
-
-
export
default
defineComponent({
-
components: { son },
-
setup () {
-
// pass value
-
let
parentValue = ref ( 'value in parent' )
-
provide(
'parentValue', parentValue)
-
// pass method
-
const
handle
= ( sonValue: any ) => {
-
parentValue.
value = sonValue
-
}
-
provide(
'handle', handle)
-
return { parentValue }
-
}
-
})
-
</script>
-
<template>
-
<div>
-
<p>
Subcomponent </p> _ _ _ _
-
<div>{
{ value }}
</div>
-
< button @ click = "fn" >
Click to modify the value of the parent component </ button >
-
</div>
-
</template>
-
<script lang="ts">
-
import { defineComponent, inject }
from
'vue'
-
-
export
default
defineComponent({
-
setup () {
-
const
value = inject ( 'parentValue' ) // use the value passed from the parent component
-
const
handle: any =
inject(
'handle')
-
// Modify the value of the parent component
-
const
fn = (
) => {
-
handle
( 'Modify the value of the parent component' )
-
}
-
return { value, fn }
-
}
-
})
-
</script>