Parent-child communication

  1. Parent component passes data to child component: custom property props
  2. 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:

  1. Property values in props can be obtained directly from the subcomponent template
  2. 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:

  1. A custom event is emitted via the context.emit method as argument 2 to the setup functioncontext.emit('send-money', 50)
  2. 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:

  1. Progeny data: provide
  2. 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

  1. The grandparent component passes a function and then retrieves data from the function’s parameters
  2. 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