Home Web Front-end JS Tutorial There are several ways to register components in Vue

There are several ways to register components in Vue

Mar 28, 2018 pm 05:41 PM
several kinds method components

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',{})
Copy after login

2 , Partial registration

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

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!"
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article

Hot Article

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel. How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel. Mar 28, 2024 pm 12:50 PM

How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.

How to delete WeChat friends? How to delete WeChat friends How to delete WeChat friends? How to delete WeChat friends Mar 04, 2024 am 11:10 AM

How to delete WeChat friends? How to delete WeChat friends

How to enter bios on Colorful motherboard? Teach you two methods How to enter bios on Colorful motherboard? Teach you two methods Mar 13, 2024 pm 06:01 PM

How to enter bios on Colorful motherboard? Teach you two methods

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) May 01, 2024 pm 12:01 PM

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)

Summary of methods to obtain administrator rights in Win11 Summary of methods to obtain administrator rights in Win11 Mar 09, 2024 am 08:45 AM

Summary of methods to obtain administrator rights in Win11

Detailed explanation of Oracle version query method Detailed explanation of Oracle version query method Mar 07, 2024 pm 09:21 PM

Detailed explanation of Oracle version query method

Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed! Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed! Mar 23, 2024 am 10:42 AM

Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed!

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) May 04, 2024 pm 06:01 PM

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)

See all articles