Author: Little potato Biubiubiu

Blog Park: www.cnblogs.com/HouJiao/

The Denver nuggets: juejin. Cn/user / 243617…

Wechat official account: Tudou Mother’s Broken thoughts (scan code attention, suck cats together, listen to stories together, learn front-end technology together)

Code word is not easy, praise to encourage yo ~

Relationship composition of parent and child components

This article will summarize the communication between parent and child components in Vue.

What about the relationship between parent and child components in VUE, or which component can be called parent and which component can be called child.

In my understanding, the parent-child component relationship is also relatively simple.

In projects built using vue-CLI tools, we often register references to one component in another.

Home.vue

<template>
  <div class="home">
    <p>Here is the Home component</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
    .home{
        border:1px solid #4488ff;
        display: inline-block;
        padding: 10px;
    }
</style>
Copy the code

App.vue

<template>
  <div id="app">
    <p>So here's the app component</p>
    <! -- stpe3: use -->
    <home></home>
  </div>
</template>

<script>
/ / step1: introduction
import Home from './components/Home'
export default {
  name: 'App'./ / step2: registration
  components: { Home }   
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: inline-block;
  border:1px solid orange;
  padding: 10px;
}
</style>
Copy the code

In the above two components, we introduced, registered, and used the Home component in the App component.

In vUE, we can call the App component the parent and the Home component the child, and the two components form a parent-child relationship.

It must be noted that the import, registration and use of these three steps are indispensable. Otherwise, the two components cannot form a parent-child relationship or communicate using the communication methods summarized below.

Now that I understand the relationship between the parent and child components in VUE, I’ll show you how the parent and child components used to communicate.

props

The first way parent-child components communicate in VUE is through the props property, and the parent component communicates to the child component.

So let’s do this in practice.

First find the place in the parent component that uses the child component and add the data that the parent needs to pass to the child component.

App.vue (omits unmodified code)

<template>
  <div id="app">
    <p>So here's the app component</p>
    <home
        title="Communication between parent and child components in Vue"
        date="2020/03/05 now">
    </home>
  </div>
</template>
Copy the code

As you can see, in this step we add two data that we need to pass to the child component where we use it: title and date.

<home 
    title="Communication between parent and child components in Vue" 
    date="2020/03/05 now">
</home>
Copy the code

The next step is to accept these two parameters in the child component using props.

Home.vue (omits unmodified code)

<script>
export default {
  name: 'Home'.props: ['title'.'date']}</script>
Copy the code

As a final step, we can use title and date in the child components just as we used vue Data.

Home.vue (omits unmodified code)

<template>
  <div class="home">
    <p>Here is the Home component</p>
    <p>title:{{title}}</p>
    <p>date:{{date}}</p>
  </div>
</template>
Copy the code

After starting the project, the browser views the results.

For more on the use of props, click here.

$emit

The second way for parent and child components to communicate in VUE is through the $emit method, which belongs to the child component to communicate to the parent component.

The $emit method is an instance of vue and can be used as follows:

The first parameter, eventName, is the eventName.

The event name corresponds to a native DOM event (a custom event like Click) that is listened on by v-ON in the parent component.

When we execute $emit(eventName) in the child component, the corresponding event in the parent component is emitted.

So first we use the $emit method in the child component to write code (without passing the second argument) that fires the event in the parent component.

Home.vue

<template>
  <div class="home">
    <p>Here is the Home component</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script>
export default {
  name: 'Home'.methods: {
    btnClickHandler: function(param){
        if(param == "Yes") {this.$emit('sayYes');
        }else if(param == "No") {this.$emit('sayNo'); }}}}</script>
Copy the code

You can see that there are two buttons in the Home child.

When '[Yes] button' is clicked, 'this.$emit('sayYes')' will be executed to trigger the 'sayYes' event in the parent component. When '[No] button' is clicked, 'this.$emit('sayNo')' is executed to trigger the 'sayNo' event in the parent component.Copy the code

We then implement the corresponding Native DOM event in the parent component.

App.vue

<template>
  <div id="app">
    <p>So here's the app component</p>
    <home
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
    </home>
    <p>val: {{val}}</p>
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  name: 'App',
  data() {
    return {
      val: "default",}},components: { Home },
}
</script>
Copy the code

SayYes and sayNo are native DOM events defined in the parent component.

<home
    v-on:sayYes='val="yes"'
    v-on:sayNo='val="no"'>
</home>
Copy the code

Val is a data defined in the parent component. The default value is ‘default’.

When combining the code logic of the child components, we know that the result is as follows:

When the [Yes] button is clicked, this.$emit('sayYes') will emit the sayYes event in the parent component. In the sayYes event, the val value in vue data will be changed to Yes. $emit('sayNo') when clicking on the [No]button, this.$emit('sayNo') will trigger the sayNo event in the parent component. In the sayNo event, val in vue data will be changed to No.Copy the code

Verify our statement in the browser.

$parent

$parent is an instance property of vue that represents the parent instance of the current component.

sayYes
this.$parent.sayYes

App.vue

<template>
  <div id="app">
    <p>So here's the app component</p>
    <home></home>
    <p>val: {{val}}</p>
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  name: 'App',
  data() {
    return {
      val: "default",}},components: { Home },
  methods: {
    sayYes: function() {
      this.val = "yes";
    },
    sayNo: function() {
      this.val = "no"; }}}</script>
Copy the code

We define two methods in the parent component: sayYes and sayNo. The logic is to change the value of val to yes. Change the value of val to no.

SayYes and this.$parent. SayNo can then be used in child components to call the corresponding sayYes and sayNo methods in parent components.

Home.vue

<template>
  <div class="home">
    <p>Here is the Home component</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script>
export default {
  name: 'Home'.methods: {
    btnClickHandler: function(param){
        if(param == "Yes") {this.$parent.sayYes();
        }else if(param == "No") {this.$parent.sayNo(); }}}}</script>
Copy the code

The code for the btnClickHandler method in the child component has been changed to this.$parent.

So let’s see what happens.

conclusion

At this point, the communication mode of parent and child components in VUE has been summarized. The following methods are summarized respectively:

First: parent component communicates to child component -props property second: child component communicates to parent -$EMIT method third: child component communicates to parent -$parent propertyCopy the code

about

The author

Small potatoes biubiubiu

For a hard-working front-end novice, knowledge is limitless. Believe that you can always get where you want as long as you don’t stop learning

At the same time, I am also a person who likes small cats. There is a beautiful short female cat named Potato at home

Blog garden

www.cnblogs.com/HouJiao/

The Denver nuggets

Juejin. Cn/user / 243617…

Wechat official account

Potato mama’s mumbo jumbo

The original purpose of the wechat official account is to record some stories about myself and people around me, while updating some technical articles from time to time

Welcome to scan code attention, suction cat, listen to stories, learn front-end technology together

The author remarks

Small summary, welcome everyone guidance ~