Component transfer parameter "2" in Vue

Liang Yu 2021-09-15 09:45:08

One 、 How components pass parameters

  • The parent component passes parameters to the child component 「 Attribute transfer parameter 」
  • The child component passes parameters to the parent component 「 Custom events 」
  • Components pass parameters to each other 「Eventbus & $emit & $on
  • Vue The instance property is passed as a parameter 「$parent$children$root、refs」
  • Vuex The ginseng

1.1 The parent component passes parameters to the child component 「 Attribute transfer parameter 」

  • Scope of component instance is isolated . It means not to ( Should not be ) Directly reference the data of the parent component in the template of the child component . Let the child use the data of the parent component , The props Options .
  • Component is a one-way data flow : The parent component can pass parameters directly to the child component , However, a child component cannot pass parameters directly to the parent component
  • The parent component passes parameters to the child component based on properties , Subcomponents are based on props Property to receive ),props There are three patterns , Array 、 Objects and functions 「 The function form is not commonly used 」
  • If the child component does not need to verify the parameters passed by the parent component , It is usually written in the form of an array

image.png

  • Subcomponents props If it's written as an object , It is generally used to verify the format of parameters passed by the parent component 「 All kinds that can be judged ( That is to say type value ) Yes :String, Number, Boolean, Function, Object, Array, Symbol」

image.png

summary : The parent component passes parameters to the child component based on properties , For sub components props receive ; If you need to verify the parameters passed by the parent component , that props You need to write it in array format , If you do not need to verify the parameters passed by the parent component , that props Just write it in the form of an array . The parameters passed by the parent component through the property are read-only , Can't modify , If you want to modify , It needs to be in the of sub components data Set a variable in to receive the properties passed by the parent component , At this point, you can modify , However, the modified data will only affect the sub components , The data on the parent component will not change

image.png

1.2 The child component passes parameters to the parent component 「 Event binding mechanism 」

Vue One way data flow in : When a parent component passes data to a child component , Can only flow from parent component to child component , No child component can flow to parent component . This prevents changing the state of the parent component other than the child component .

Event binding mechanism

  • The parent component passes methods to the child component through custom events
  • For sub components this.$emit( Events customized by the parent component , Parameters 1, Parameters 2), Parameters can be subcomponents , Pass it to the parent component , This enables the child component to pass values to the parent component

image.png

1.3 Components pass parameters to each other

  • Two components that pass parameters to each other must be on the same page 「 The principle is based on the publish subscribe mode 」
  • Event.$on Add events to the event pool
  • Event.$emit Execute events in the event pool

1.3.1 stay main.js Create a global Eventbus, Mount it to Vue On the prototype of 「 The reason for mounting to the prototype is , Can be used in any page 」

image.png

1.3.2 stay compents New under folder Coma and Comb Components

image.png

image.png

image.png

image.png

style Medium scoped

image.png

1.4 Vue The instance property is passed as a parameter 「 Note the parent-child component lifecycle sequence 」

  • $parent Get the data of the parent element / Method
  • $root Get the data of the root component / Method
  • $children Get the data of child elements / Method 「 Only in the parent component mounted Function to get the data and methods of sub components 」
  • refs Get data from subcomponents / Method 「 In addition, you can get DOM Elements 」

Parent child component life cycle execution process

In the child component  To get the contents of the parent component , Can be in beforeCreate Get to the , This is because the subcomponent is executing until beforeCreate This  When the hook function , The hook function of the parent component has  Experienced beforeCreate、created( There is already... In the parent component data 了 )、beforeMount This hook function

As shown in the figure below : 20200421213852.png

The process of destroying child components in a parent component

image.png

1.4.1 Subcomponent pass $parent Get the data and methods in the parent component

image.png

image.png

1.4.2 $root Get the data of the root component / Method

image.png

1.4.3 $children Get the data of child elements / Method

Parent component based on $children Get the data and methods in the subcomponent , Only in the parent component mounted Hook function

  • This is determined by the life cycle sequence of parent-child components , When the parent component executes beforeCreate、created、beforeMount When , The life cycle of the subcomponents has not yet begun , So I can't get the data in the sub component
  • Only wait until the parent component executes beforeCreate、created、beforeMount After these hook functions , The declaration cycle of the subcomponent begins beforeCreate、created、beforeMount、mounted, So you want to get the data in the child component from the parent component , Must be in the parent component mounted Hook function

20200421213852.png

image.png

image.png

<template>
<div class="home"> <coma></coma> <comb></comb> </div>
</template>
<script> import Coma from "@/components/Coma"; // Child components a import Comb from "@/components/Comb.vue"; // Child components b export default { name: "Home", components: { Coma, Comb, }, mounted() { // Parent component based on $children The result of getting sub components is an array  console.log(this.$children); // If you only want to get one of the many subcomponents , You can get... By array subscript  console.log(this.$children[1].title); }, }; </script>
 Copy code 

image.png

1.4.4 $refs Get subcomponent data

image.png

image.png

$refs Not only can you get sub component data , You can also get DOM Elements

image.png

image.png


Two 、 In the component native

Bind event methods directly in the child component tag in the parent component , When you click a button, the method does not execute

image.png

image.png

If you want to bind the method on the child component of the event in the parent component, you can execute , Then you need to add... After the binding event .native

<template>
<div class="home"> <!-- Need to add .native, Otherwise, the method will not be executed --> <coma @click.native="show"></coma> </div>
</template>
<script> import Coma from "@/components/Coma"; // Child components a export default { name: "Home", components: { Coma, }, methods: { show() { alert(" I am a show Method "); }, }, }; </script>
 Copy code 

3、 ... and 、 Dynamic components

If you want to implement dynamic components 「 Show different components when clicking the button 」, Then we need to use component label

image.png

Please bring the original link to reprint ,thank
Similar articles

2021-09-15