In-depth component communication of Vue3-props–custom events-mitt use-v-model principle in vue3-useAttrs–ref and $parent–provide and inject–pina–slot

For example: Get the component instance after the parent component is mounted

Parent component internal code:

<template>
  <div>
    <h1>ref and $parent</h1>
    <Son ref="son"></Son>
  </div>
</template>
<script setup>
import Son from "./Son.vue";
import {<!-- --> onMounted, ref } from "vue";
const son = ref();
onMounted(() => {<!-- -->
  console.log(son.value);
});
</script>

However, it should be noted that If you want the parent component to obtain the data or methods of the child component, you need to expose it to the outside world through defineExpose, because the data inside the component in vue3 is "closed to the outside world". ", no external access

Using ref in vue2 does not require subcomponents to expose data externally, and can directly obtain the data and methods of subcomponents

<script setup>
import {<!-- --> ref } from "vue";
//data
let money = ref(1000);
//method
const handler = ()=>{<!-- -->
}
defineExpose({<!-- -->
  money,
   handler
})
</script>

$parent can get the parent component instance VC of a certain component, so you can use the data and methods inside the parent component. There must be a button inside the child component to get the parent component instance when it is clicked. Of course, the data and methods of the parent component need to be exposed to the outside world through the defineExpose method

<button @click="handler($parent)">Click me to get the parent component instance</button>

7. provide and inject

provide[provide]

inject[injection]

vue3 provides two methods provide and inject, which can realize passing parameters between generational components (ancestors and Descendants)

Components Components provide data:

The provide method is used to provide data. This method needs to pass two parameters, respectively providing data key and providing data value

<script setup lang="ts">
import {<!-- -->provide} from 'vue'
provide('token','admin_token');
</script>

Descendant components can obtain data through the inject method, and obtain stored values through key

<script setup lang="ts">
import {<!-- -->inject} from 'vue'
let token = inject('token');
</script>

If you need to modify the "Ferrari" passed by your grandfather, see the picture below

8. pinia

pinia official website: https://pinia.web3doc.top/

pinia is also a centralized management state container, similar to vuex. But the core concept does not have mutation, modules, refer to the official website for usage
vuex: Centralized management state container, which can realize communication between any components! ! !
Core concepts: state, mutations, actions, getters, modules

pinia: Centralized management state container, which can realize communication between any components! ! !
Core concepts: state, actions, getters
pinia writing: selector API, combined API

8.1 Selector API writing method:

Step 1: Create a new store directory, and create a new index.js file under the store directory, the content is as follows:

//Create a large warehouse
import {<!-- --> createPinia } from 'pinia';
//createPinia method can be used to create a large warehouse
let store = createPinia();
//Exposed to the outside world, install the warehouse
export default store;

Step 2: Introduce in the main.js file

Step 3: Create a new modules folder and create a info.js small warehouse

//Define info small warehouse
import {<!-- --> defineStore } from "pinia";
//The first warehouse: the name of the small warehouse The second parameter: the configuration object of the small warehouse
//defineStore method execution will return a function, the function of the function is to allow the component to obtain the warehouse data
let useInfoStore = defineStore("info", {<!-- -->
    //Store data: state
    state: () => {<!-- -->
        return {<!-- -->
            count: 99,
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    },
    actions: {<!-- -->
        //Note: The function does not have a context object
        //No commit, no mutations to modify data
        updateNum(a, b) {<!-- -->
            this.count += a;
        }
    },
    getters: {<!-- -->
        total() {<!-- -->
            let result= this.arr.reduce((prev, next) => {<!-- -->
                return prev + next;
            }, 0);
            return result;
        }
    }
});
//exposed method
export default useInfoStore;

Step 4: Use pinia

8.2. Combined API writing method:

//Define the combined API warehouse
import {<!-- --> defineStore } from "pinia";
import {<!-- --> ref, computed} from 'vue';
//Create a small warehouse
let useTodoStore = defineStore('todo', () => {<!-- -->
    let todos = ref([{<!-- --> id: 1, title: 'Eat' }, {<!-- --> id: 2, title: 'Sleep' }, {< !-- --> id: 3, title: 'Beat Doudou' }]);
    let arr = ref([1,2,3,4,5]);

    const total = computed(() => {<!-- -->
        return arr.value.reduce((prev, next) => {<!-- -->
            return prev + next;
        }, 0)
    })
    // Be sure to return an object: properties and methods can be provided to components
    return {<!-- -->
        todos,
        arr,
        total,
        updateTodo() {<!-- -->
            todos.value.push({<!-- --> id: 4, title: 'combined API method' });
        }
    }
});

export default useTodoStore;

9. slot

Slots: Default slots, named slots, and scoped slots can realize parent-child component communication.

Default slot:

Write the slot global component tag in the template inside the subcomponent

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

Provide structure inside the parent component: Todo is the child component. When used inside the parent component, write the structure inside the double tag and pass it to the child component

Note that when developing a project, there is generally only one default slot

<Todo>
  <h1>I'm the default slot filled structure</h1>
</Todo>

Named slot:

As the name suggests, this slot with the name leaves multiple slots with the specified name inside the component.

The following is inside a subcomponent, leaving two slots in the template

<template>
  <div>
    <h1>todo</h1>
    <slot name="a"></slot>
    <slot name="b"></slot>
  </div>
</template>
<script setup lang="ts">
</script>

<style scoped>
</style>

The parent component internally passes the struct to the specified named slot. Note that v-slot can be replaced by #

<template>
  <div>
    <h1>slot</h1>
    <Todo>
      <template v-slot:a> //can be replaced with #a
        <div>Fill in the structure of part A of the component</div>
      </template>
      <template v-slot:b>//can be replaced with #b
        <div>Fill in the structure of part B of the component</div>
      </template>
    </Todo>
  </div>
</template>

<script setup lang="ts">
import Todo from "./Todo.vue";
</script>
<style scoped>
</style>

Scoped slots

Scope slot: It can be understood that the data of the subcomponent is provided by the parent component, but the structure and appearance (style) of the subcomponent cannot be determined inside

The subcomponent Todo code is as follows:

<template>
  <div>
    <h1>todo</h1>
    <ul>
     <!--The array is traversed inside the component-->
      <li v-for="(item,index) in todos" :key="item.id">
         <!--Scope slot returns data to parent component-->
         <slot :$row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
defineProps(['todos']);//Accept the data passed by the parent component
</script>
<style scoped>
</style>

The internal code of the parent component is as follows:

<template>
  <div>
    <h1>slot</h1>
    <Todo :todos="todos">
      <template v-slot="{$row,$index}">
         <!--The parent component determines the structure and appearance of the child component-->
         <span :style="{color:$row.done?'green':'red'}">{<!-- -->{$row.title}}</span>
      </template>
    </Todo>
  </div>
</template>

<script setup lang="ts">
import Todo from "./Todo.vue";
import {<!-- --> ref } from "vue";
// parent component internal data
let todos = ref([
  {<!-- --> id: 1, title: "Eating", done: true },
  {<!-- --> id: 2, title: "Sleep", done: false },
  {<!-- --> id: 3, title: "Beat Doudou", done: true },
]);
</script>
<style scoped>
</style>