The method of component parameter transmission

  • Parent component passing parameters to child component “Attribute Passing parameters”
  • Child component passes “Custom Event” to parent component
  • Components pass parameters to each other “Eventbus &”$emit & $on“
  • Vue instance attribute parameter”$parent,$children,$rootAnd refs”
  • Vuex mass participation

1.1 Parent Component Passing Parameters to Child Component Attribute Passing Parameters

  • The scope of a component instance is isolated. This means that you cannot (and should not) directly reference the parent component’s data in the child component’s template. To make a child component use the parent component’s data, you need to pass the props option of the child component.
  • Components are one-way data flows: a parent component can pass parameters directly to a child component, but a child component cannot pass parameters directly to a parent component
  • The parent component passes parameters to the child component based on the properties, and the child component receives parameters based on the props property.) There are three modes for props, arrays, objects, and functions.
  • If the child component does not need to verify the parameters passed by the parent component, it is usually written as an array

  • If the props of a child component are written as objects, they are usually used to check the format of the parameters passed by the parent component. “All types (such as type values) are: String, Number, Boolean, Function, Object, Array, Symbol.”

Conclusion: The parent component passes parameters to the child component based on attributes, and the child component receives parameters using props. If the parameters passed by the parent component need to be verified, props should be written as an array. If the parameters passed by the parent component do not need to be verified, props should be written as an array. The parameters passed by the parent component through attributes are read-only and cannot be modified. If you want to modify the parameters, you need to set a variable in the data of the child component to receive the attributes passed by the parent component. In this case, you can modify the parameters, but the modified data only affects the child component, and the data on the parent component will not be changed

1.2 Event Binding Mechanism by which Child Components Send Parameters to Parent Components

One-way data flow in Vue: When a parent component passes data to a child component, only the parent component flows to the child component, and no child component flows to the parent. This prevents the child component from changing the parent component’s state.

Event binding mechanism

  • The parent component passes methods to its children through custom events
  • The child component uses this.$emit(parent component custom event, parameter 1, parameter 2). The parameter can be the child component and passed to the parent component

1.3 Parameter Transfer between Components

  • The two components must be on the same page. “The principle is publish-subscribe.”
  • $on adds events to the Event pool
  • Event.$emit executes events in the Event pool

1.3.1 Create a global Eventbus in main.js and mount it to the prototype of Vue “Mount it to the prototype so that it can be used in any page”

1.3.2 Create Coma and Comb components under the Compents folder

The style of the scoped

1.4 Vue Instance Attribute Passing Parameter “Pay attention to parent-child Component Lifecycle Order”

  • $parent Gets the data/method of the parent element
  • $root Gets the data/method of the root component
  • $children Returns child data/methods only in the Mounted function of the parent component.
  • Refs gets the data/methods of the child components “in addition to DOM elements”

Parent component lifecycle execution process

In the child component, the contents of the parent component can be retrieved by the beforeCreate hook function. This is because the child component executes the beforeCreate hook function. The parent’s hook functions already go through beforeCreate, created(the parent already has data), and beforeMount

See figure below:

The process of destroying a child component in a parent component

1.4.1 The child component uses $parent to get data and methods in the parent component

1.4.2 $root Obtain the data/method of the root component

1.4.3 $children data/method for obtaining child elements

The parent component obtains data and methods from the child component based on the $children mounted hook function

  • This is due to the order of the life cycle of the parent and child components. When the parent executes beforeCreate, Created, and beforeMount, the life cycle of the child component has not started, so the data in the child component cannot be retrieved
  • BeforeCreate, created, created, and Mounted start the declaration cycle for child components only after the parent component executes the beforeCreate, created, and beforeMount hook functions. The mounted hook function of the parent component is used to retrieve data from the child component

<template>
  <div class="home">
    <coma></coma>
    <comb></comb>
  </div>
</template>
<script>
import Coma from "@/components/Coma"; // Subcomponent A
import Comb from "@/components/Comb.vue"; // Subcomponent B

export default {
  name: "Home".components: {
    Coma,
    Comb,
  },
  mounted() {
    // The parent gets an array of children based on $children
    console.log(this.$children);
    // If you want to get only one of the many subcomponents, you can get it by array subscript
    console.log(this.$children[1].title); }};</script>
Copy the code

1.4.4 $refs Gets sub-component data

$refs can retrieve not only child component data, but also DOM elements

2. Native in components

Bind event methods directly to child component tags in the parent component; the method does not execute when the button is clicked

If you want a method on a child of a bound event in the parent to execute, you need to add. Native to the end of the bound event

<template>
  <div class="home">
    <! Native is required, otherwise the method will not be executed.
    <coma @click.native="show"></coma>
  </div>
</template>
<script>
import Coma from "@/components/Coma"; // Subcomponent A

export default {
  name: "Home".components: {
    Coma,
  },
  methods: {
    show() {
      alert("I'm show method"); ,}}};</script>
Copy the code

Dynamic components

If you want to implement dynamic components that display different components when buttons are clicked, you need the Component tag