An article to show you how to create and use Vue components

1. What is a component?
2. Create global components

Method 1

1. Vue.extend
2. Vue.component

Method 2

Using Vue.component directly

Method 3

3. Creating Local Components

4. Data and methods in components

5. Communication between components

props/$emit

By event form

Summarize

1. What is a component?

Component is one of the most powerful features of Vue.js. Components extend HTML elements to encapsulate reusable code. At a high level, components are custom elements to which the Vue.js compiler adds special functionality.

2. Create global components

Method 1

1. Vue.extend

       var com1 = Vue.extend({
// The template property specifies the HTML structure that the component will display template: '<h3>This is a component created using Vue.extend</h3>'
            })

2. Vue.component

Vue.component('component name', created component template object) registers the component

  Vue.component('myCom1', com1)

Note : If you use Vue.Component to register a global component, and the component name is in camel case, you need to change the uppercase camel case to lowercase letters when referencing the component. At the same time, use a “–” link between two words. If not used, just use the name directly.

insert image description here

Method 2

Using Vue.component directly

            Vue.component('mycom2', {
                template: '<div><h3>This is a component created directly using Vue.component</h3>
<span>123</span></div>'
            })

Example:

insert image description here

Method 3

1. Outside the controlled #app, use the template element to define the HTML template structure of the component.

<template id="tmpl">
            <div>
                <h1>This is a component structure defined externally through the template element</h1>
                <h4>Easy to use, good!</h4>
            </div>
        </template>

2. Register components using id

   Vue.component('mycom3', {
        template: '#tmpl'
    })

3. Creating Local Components

Local components are created in the same way as global components. The only difference is that partial components are defined within a Vue instance.

insert image description here

4. Data and methods in components

1. Components can have their own data.

2. The data in the component is a little different from the data in the instance. The data in the instance can be an object. But the data in the component must be a method.

3. In addition to being a method, the data in the component must also return an object.

4. The data in the component is used in the same way as the data in the instance. (The same goes for methods)

insert image description here

5. Communication between components

insert image description here

props/$emit

Parent component A passes props to child component B, and B to A is implemented by $emit in component B and v-on in component A.

Subcomponents:

<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "users",
  props: {
    users: { //Customized name of child tags in parent component type: Array,
      require: true
    }
  }
}
</script>

<style scoped>
 li{
   list-style-position: inside;
 }
</style>

Parent component:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</template>

<script>
import Users from "@/components/users";
export default {
  name: 'App',
  data(){
    return {
      users: ['Xi'an Post and Telecommunications', 'Xi'an Petroleum', 'Northwest Political Science and Law', 'Xi'an Industry', 'Xi'an Finance']
    }
  },
  components:
    Users,
  }
}
</script>

By event form

Subcomponents :

<template>
  <header>
    <h1 @click="changeTitle">{{ title }}</h1>
  </header>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      title: 'Vue.js Demo'
    }
  },
  methods: {
    changeTitle(){
      this.$emit('titleChanged','Xi'an University of Posts and Telecommunications');
    }
  }
}
</script>

<style scoped>
 h1{
   background-color: greenyellow;
 }
</style>

Parent component:

<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ title }}</h2>
  </div>
</template>
<script>
import Son from "@/components/Son";
export default {
  name: "Father",
  data(){
    return {
      title: 'What is passed is a value'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>

Summarize

The child component sends messages to the parent component through events, which actually means that the child component sends its own data to the parent component.

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in: