Parent-child communication
- Parent component passes data to child component: custom property props
- Child component passes data to parent component: custom event $emit()
The father the son
</div> <button @click='money=200'> modify </button> <hr> // 2. Write to the component, <Child :money='money' /> </div> </template> <script> import Child from './ child.vue 'import {ref} from 'vue' export default { name: 'App', components: { Child }, setup () { //1. Const money = ref(100) return {money}}} </script>Copy the code
{{money}} </div> < button@click ='getMoney'> Click </button> </template> <script> export default { name: 'Child', props: { // 3. Inside the props and collect the parent component of data, and the parent components: consistent call money behind money: {type: Number, default: 0}}, setup (props) {// in Vue3, props is used to get the data passed by all the parent components. Const getMoney = () => {console.log(props. Money)} return {getMoney}} </script>Copy the code
Conclusion:
- Property values in props can be obtained directly from the subcomponent template
- You need to get the property value from the first parameter of the setup function in the.js code
Child the parent:
Code demo: <div> <button @click='money=200'> </button> <hr> // 3. <Child :money='money' @send-money='getMoney' /> </div> </template> <script> import Child from './Child.vue' import { ref } from 'vue' export default { name: 'App', components: { Child }, Setup () {const money = ref(100) // 4. Const getMoney = (value) => {// value = money.value - value } return { money, getMoney } } } </script>Copy the code
<template> <div> < button@click ='getMoney'> </button> </template> <script> export default {name: 'Child', // 2. emits: ['send-money'], props: {money: {type: Number, default: 0}}, setup (props, context) {// in Vue3, props is used to get the data passed by all the parent components. Const getMoney = () => {console.log(props. Money) // this.$emit('send-money', 50) Emit ('send-money', 50)} return {getMoney}} </script>Copy the code
Conclusion:
- A custom event is emitted via the context.emit method as argument 2 to the setup function
context.emit('send-money', 50)
- Custom events triggered by a child component need to be declared in the emits option (see which custom events are triggered by this component).
Dependency injection
Usage scenario: There is a parent component, in which there are children components, there are children components, there are many children components, share the parent component data.
Code demo: <div> <button @click='money=200'> </button> <hr> <Child :money='money' @send-money='getMoney' /> </div> </template> <script> import Child from './Child.vue' import { ref, provide } from 'vue' export default { name: 'App', components: {Child}, setup () {// provide('moneyInfo', 1000) const money = ref(100) const getMoney = (value) => {// value = money.value - value} return { money, getMoney } } } </script>Copy the code
<template> <div> Grandson component :{{moneyInfo}} </div> </template> <script> import {inject} from 'vue' export default {name: 'GrandSon', setup () { const moneyInfo = inject('moneyInfo') return { moneyInfo } } } </script>Copy the code
{{money}} -- {{moneyInfo}} </div> <GrandSon > <script> import GrandSon from '@/GrandSon' import { inject } from 'vue' export default { name: 'Child', components: {GrandSon}, // Custom events triggered by child components need to be declared in the emits option. emits: ['send-money'], props: {money: {type: Number, default: Const moneyInfo = inject('moneyInfo') // In Vue3, // The props data is read-only, Const getMoney = () => {console.log(props. Money) // this.$emit('send-money', 50 context. Emit ('send-money', 50)} return {getMoney, moneyInfo}} </script>Copy the code
Conclusion:
- Progeny data: provide
- Grandchildren get data: Inject
Grandson passes the data directly to grandfather
<div> <button @click='money=200'> </button> <hr> <Child :money='money' @send-money='getMoney' /> </div> </template> <script> import Child from './Child.vue' import { ref, provide } from 'vue' export default { name: 'App', components: {Child}, setup () {// provide('moneyInfo', 1000) // Pass a function to grandchild const handleMoney = (value) => {console.log(' grandchild passes data: ', value) } provide('handleMoney', HandleMoney) const money = ref(100) const getMoney = (value) => {// value = money. Value = money. Value - value } return { money, getMoney } } } </script>Copy the code
<template> <div> grandchild component :{{moneyInfo}} </div> < button@click ='handleSend'> </button> </template> <script> import { inject } from 'vue' export default { name: 'GrandSon', setup () { const moneyInfo = inject('moneyInfo') const handleMoney = inject('handleMoney') const handleSend = () => { // HandleMoney (200)} return {moneyInfo, handleSend}} </script>Copy the code
Summary: The child component passes data to the parent component by providing a function
- The grandparent component passes a function and then retrieves data from the function’s parameters
- The grandchild group gets and calls this function to pass the data
The grandparent provides a box and then throws the box to the grandchild, which puts the data in the box and receives it via the parameter