Combination of the API

Parent-child communication

The setup function has two arguments: props, and the second argument is an object context. The props object contains all the prop data passed by the parent component. The context object contains the attrs, slots, and emit properties. The EMIT can trigger the execution of a custom event to complete child to parent transmission

The father the son

The parent component

<template>
  <h1>The parent component</h1>
  <Son :list="list" />
</template>
<script>
import Son from './fatherson.vue'
import { reactive } from 'vue'
export default {
  name: 'App'.components: {
    Son
  },
  setup () {
    const list = reactive([{id:1.name: 'JD'}, {id:2.name: 'DiDi'}])
    return {  
      list
    }
  }
}
</script>
Copy the code

Child components

<template>
  <div>A prop received from a parent component<p v-for="item in list" :key="item">
      {{item.name}}, {{item.id}}
    </p>
  </div>
</template>

<script>
export default {
  // The child component can use props to receive data from the parent component
  props: {
    list: {
      type: Array.required:true.default:() = >[]}},setup(props) {
    console.log(props.list.length)
  }
}
</script>

<style>

</style>
Copy the code

Child the parent

Child components

<template>
  <div>A prop received from a parent component<p v-for="item in list" :key="item">
      {{item.name}}, {{item.id}}
    </p>
  </div>
  <div>Add a new company<p>The new company:<input v-model="name"></p>
    <button @click="add">add</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  // The child component can use props to receive data from the parent component
  props: {
    list: {
      type: Array.required:true.default:() = >[]}},setup(props, {emit}) {
    const name = ref(' ')
    const add = () = > {
      console.log(name.value)
      emit('add-company', name.value)
    }
    return {
      name,
      add
    }
  }
}
</script>
Copy the code

The parent component

<template>
  <h1>The parent component</h1>
  <Son :list="list" @add-company="hAdd" />
</template>
<script>
import Son from './fatehrson.vue'
import { reactive } from 'vue'
export default {
  name: 'App'.components: {
    Son
  },
  setup () {
    const list = reactive([{id:1.name: 'JD'}, {id:2.name: 'DiDi'}])
    const hAdd = (companyName) = > {
      list.push({id: Date.now(), name: companyName})
    }
    return {
      list,
      hAdd
    }
  }
}
</script>
Copy the code

conclusion

• Parent to Child: Use props data in setupSetup (props){// props is parent component data}
• Emit from child to parent: Emit from custom event when emittedSetup (props,{emit}){// emit is the trigger function}

Progeny

steps

1. Ancestor component provides data :provide(‘ data name 1’, data name) 2. Descendant components use data: Inject (‘ data name 1’)

Code demo

Father.vue

<template>
  <div class="container">
    <h1>The parent component {{money}}<button @click="money=1000">To send money</button></h1>
    <hr>
    <Son />
  </div>
</template>
<script>
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App'.components: {
    Son
  },
  setup () {
    const money = ref(100)
    // Provide the data to descendant components provide
    provide('money', money)

    return { money }
  }
}
</script>
Copy the code

Son.vue

<template>
  <div class="container">
    <h2>Subcomponents {{money}}</h2>
    <hr>
    <GrandSon />
  </div>
</template>
<script>
import { inject } from 'vue'
import GrandSon from './GrandSon.vue'
export default {
  name: 'Son'.components: {
    GrandSon
  },
  setup () {
    // Receive data provided by the ancestor component
    const money = inject('money')
    return { money }
  }
}
</script>
Copy the code

GrandSon.vue

<template>
  <div class="container">
    <h3>Sun component {{money}}</h3>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'GrandSon',
  setup () {
    const money = inject('money')

    return {money}
  }
}
</script>
Copy the code

conclusion

• Provide functions provide data and functions for future generations of components to use
• The inject function injects data and functions provided by provide into the current component

Progeny to ancestor

steps

1. Ancestor component provides data & function f that operates on data: provide(‘ function f’, data name) 2. Inject (‘ function f’) Gets the operation data in the descendant component and calls the data: inject(‘ function f’)