There are several ways to register components in Vue

This time I will bring you several ways to register components with vue. What are the precautions when using vue to register components? Here are practical cases, let’s take a look.

1. Global registration (components registered in this way must be declared before vue is instantiated)

Vue.component('tag-name',{})

2 , Partial registration

var Child = {
 template: '<p>A custom component!</p>'
}
new Vue({
 // ...
 components: {
 // <my-component> 将只在父模板可用
 'my-component': Child
 }
})

3. Extended instance

// 定义一个混合对象
var myMixin = {
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
  console.log('hello from mixin!')
 }
 }
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
 mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement inertial sliding & rebound Vue navigation bar on mobile terminal

Solve vue2.0 routing Problem with router-view not being displayed

The above is the detailed content of There are several ways to register components in Vue. For more information, please follow other related articles on the PHP Chinese website!