Detailed analysis of Vue child components and parent components

1. Parent components and child components

We often cannot tell what is a parent component and what is a child component. Now let's briefly summarize: we encapsulate a piece of code into a component, and this component is introduced in another component. The file that introduces the encapsulated component is called the parent component, and the introduced component is called the child component.

The specific code is as follows:

<div id="app">
  <component2></component2>
</div>
<script>
  // Global registration Vue.component("component1", {
    template: `
    <div>
      <h2>hello</h2>
    </div>
    `
  })

  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    components:
      // Local registration "component2": {
        template: `
            <div>
              <component1></component1>
              <h2>world</h2>
            </div>
        `,
      }
    }
  })
</script>

• 1. Globally register component component1
• 2. Locally register component component2 , and component component1 is referenced in component2

Finally, we use component component-2 in HTML.

The template code is:

<div>
  <component-1></component-1>
  <h2>world</h2>
</div>

Because component component1 also has a template, the program will automatically parse it, and the final html code of component-2 is

<div>
  <div>
      <h2>hello</h2>
    </div>
  <h2>world</h2>
</div>

So the effect we see on the browser should be:

hello
world

result:

component1 is the child component, component2 is the parent component

2. Template separation writing

When we created the component above, we wrote the template in the component. However, when we wrote it in the compiler, not only there was no code prompt, but also the line breaks were not aligned, which was very troublesome to write. So here we introduce the template separation writing method.

1. Template tag

We extract the template originally written in the component, put it in html , use template tag, and attach an id attribute to it as follows:

<template id="component2">
  <div>
    <component1></component1>
    <h2>world</h2>
  </div>
</template>

Then in the component, replace the content of the original template tag with id, so that the program will automatically find the corresponding id template:

components:
  // Local registration "component2": {
    template: `#component2`,
  }
}

Recommend this writing method

2. text/x-template

We have another way of writing, which is similar to the above. We used the template tag above. This way of writing only needs to put the content in template into the script tag, give it type type=text/x-template , and then give it an id attribute.

as follows:

<script type="text/x-template" id="component2">
  <div>
    <component1></component1>
    <h2>world</h2>
  </div>
</script>
 

3. Parent-child component communication - parent-child

When we create a parent component and a child component, if the child component also wants to get the same data on the parent component, one way is to send the interface to the background to get the data, but this will put pressure on the server, so we have a second method, which is to get the data of the parent component through props attribute.

<div id="app">
  <test1 :cmovies="movies"></test1>
</div>
<template id="test1">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ["One Piece", "Haier Brothers", "Sea King"]
    },
    components:
      "test1": {
        template: `#test1`,
        props: ['cmovies'],
        data(){
          return{}
        },
      }
    }
  })
</script>

Here we define app instance as the parent component and the child component test1 . If the child component test1 wants to get the data in the parent component data to display on the page, it needs to write the props attribute. Here, the variable cmovies is bound. Finally, when we use the child component test1 in HTML, if we want to pass the data in the parent component data , we need to bind the attribute ，:cmovies="movies"，cmovies is the variable defined in props, and the bound value is the movies list. Therefore, the value of <li v-for="item in cmovies">{{item}}</li>中的cmoviess is actually the data of the list movies , because the parent component has passed the value to the child component.

Finally, the movies in movies can be displayed on the web page.

In the unordered list shown on the above page, we use child components. The data is passed from the parent component data to the child component, and the child component is bound to the parent component through props

1. Prop Type

In the above example, we define props as an array to receive data from the parent component. We can also use objects instead, which allow configuring advanced options such as type detection, custom validation, and setting default values.

• type: can be one of the following native constructors: String、Number、Boolean、Array、Object、Date、Function、Symbol , any custom constructor, or an array of the above. Will check if a prop is of a given type and throw a warning if not. More information on Prop types is here.
• default: any specifies a default value for prop . If this prop is not passed, this value is used instead. Object or array default values ​​must be returned from a factory function.
• required: Boolean defines whether the prop is required. In non-production environments, if the value is truthy and the prop is not passed, a console warning will be thrown.
• validator: Function custom validation function will substitute the value of prop as the only parameter. In non-production environments, if this function returns a falsy value (i.e. validation fails), a console warning will be thrown. You can read more about prop validation here.
  

Example:

// Simple syntax Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// Object syntax, providing validation Vue.component('props-demo-advanced', {
  props: {
    // Detection type height: Number,
    // Detection type + other verification age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

Note: When we use props , if we use camelCase, such as cMovies , and then we bind it in HTML , if we write it like this, the program will not recognize it. We need to convert it to c-movies

4. Parent-child component communication

In the child-to-parent scenario, the child component usually passes the event to the parent component to listen, telling the parent component which button the user clicked. The function used is $emit

1. vm.$emit( ​​eventName, […args] )

parameter:

• eventName: event name
• args: an array of indefinite length

Triggers an event on the current instance. Any additional parameters are passed to the listener callback.

Example:

<div id="app">
  <test1 @item-click="cpnClick"></test1>
</div>
<template id="test1">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      cpnClick(item){
        console.log("success", item)
      }
    },
    components:
      // Local registration component test1
      "test1": {
        data(){
          return {
            categories: [
              {id: "aaa", name: "Hot Recommendation"},
              {id: "bbb", name: "Mobile Digital"},
              {id: "ccc", name: "Household appliances"},
              {id: "ddd", name: "Food and Beverage"},
            ]
          }
        },
        methods: {
          btnClick(item){
            this.$emit("item-click", item)
          }
        },
        template: `#test1`
      }
    }
  })
</script>

The above code defines test1 child component, and passes the event and additional parameter item through $ emit in methods . Then the parent component binds the event through @item-click="cpnClick" , so that the parent component can receive the click event of the child component and trigger its own click event. The effect is as follows

We can see that the logs printed by the console contain the categories of subcomponents.

5. Parent-child component communication-combined with two-way binding case

The following example combines parent-to-child and child-to-parent, as well as v-model , which is a very comprehensive example.

1. Basic template code

<div id="app">
  <cpn :number1="num1" :number2="num2"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{number1}}</h2>
    <h2>{{number2}}</h2>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      num1: 0,
      num2: 1,
    },
    components:
      // Define subcomponent cpn
      "cpn": {
        template: `#cpn`,
        props: {
          number1: Number,
          number2: Number,
        }
      }
    },
  })
</script>

The code does the following

• 1. Define the child component cpn , and define two attributes number1 and number2 to receive data passed by the parent component
• 2. The subcomponent cpn is referenced in html code, and num1 and num2 in the app strength are passed to the properties in the subcomponent props
• 3. Finally, the data number1 and number2 we display on the page are actually num1 and num2 in data

The final page display effect is:

0
1

2. Add two-way binding

Based on the above template, we add two-way binding, add 2 input tags, and use v-model to bind with the attributes in props

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <input type="text" v-model="number1">
    <h2>props:{{number2}}</h2>
    <input type="text" v-model="number2">
  </div>
</template>

The above code completes the two-way binding, but there will be an error warning

When we use two-way binding with props in a child component, a warning will appear, which means do not use two-way binding props . It is recommended to use data or compused for two-way binding. Here we change it to data binding.

<template id="cpn">
  <div>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>
data(){
   return {
     dnumber1: this.number1,
     dnumber2: this.number2,
   }
},

When we bind to data , there will be no error.

3. Reverse Binding

Following the above idea, we hope that when input value is changed, the values ​​of num1 and num2 in the parent component will also be changed at the same time in data . At this time, reverse binding is required to pass the value from child to parent.

Here is the complete code:

<div id="app">
  <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <label>
      <input type="text" :value="dnumber1" @input="num1Input">
    </label>
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <label>
      <input type="text" :value="dnumber2" @input="num2Input">
    </label>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      num1: 0,
      num2: 1,
    },
    methods: {
      num1change(value){
        this.num1 = parseInt(value)
      },
      num2change(value){
        this.num2 = parseInt(value)
      },
    },
    components:
      // Define subcomponent cpn
      "cpn": {
        template: `#cpn`,
        props: {
          number1: Number,
          number2: Number,
        },
        data(){
          return {
            dnumber1: this.number1,
            dnumber2: this.number2,
          }
        },
        methods: {
          num1Input(event){
            // 1. Assign the value in input to dnumber this.dnumber1 = event.target.value
            // 2. In order for the parent component to modify the value, an event needs to be emitted this.$emit("num1change", this.dnumber1)
          },
          num2Input(event){
            // 1. Assign the value in input to dnumber this.dnumber2 = event.target.value
            // 2. In order for the parent component to modify the value, an event needs to be emitted this.$emit("num2change", this.dnumber2)
          }
        }
      }
    },
  })
</script>

The effect is as follows:

6. Component access parent access child

When we need to use the function or attribute value in the child component in the parent component, we can use $refs , which returns Object . Let's look at the following code first.

<div id="app">
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">Button</button>
</div>
<template id="cpn">
  <div>
    I am a child component</div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      btnClick(){
        console.log(this.$refs.aaa.name)
        this.$refs.aaa.showMessage()
      }
    },
    components:
      "cpn": {
        template: `#cpn`,
        data(){
          return {
            name: "I am the name of the subcomponent"
          }
        },
        methods: {
          showMessage(){
            console.log("showMessage")
          }
        }
      }
    }
  })
</script>

The above code does the following things

• 1. Created component cpn , which defines a method showMessage and an attribute name
• 2. The child component cpn is used in the parent component, and an attribute ref value of aaa is bound, which is equivalent to a unique identifier
• 3. The parent component's btnClick method needs to use the methods and properties in the child component. It only needs this.$refs.aaa , where aaa is the property of the child component bound above
• 4. Finally, use this.$refs.aaa.name to use name attribute in the subcomponent

This concludes this article on the detailed analysis of Vue child components and parent components. For more relevant Vue child components and parent components, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!