简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Detailed explanation of Vue 2.0 component registration

php中世界最好的语言
Release： 2018-03-10 13:50:23
Original
1674 people have browsed it

This time I will bring you a detailed explanation of Vue's 2.0 component registration. What are the precautions for Vue's 2.0 component registration? The following is a practical case, let's take a look.

//Global registration: 

Vue.component("my-component",{template:&#39;<div>A custom component!</div>&#39;});
/*交换位置会报错----创建组件必须在根实例化之前*/
Copy after login

//Create root instance: 

new Vue({
 el:"#app"
 })
Copy after login

---------

//Local registration :

new Vue({
el: "#app1",
components: {
// <my-zujian> 将只在父组件模板中可用
&#39;my-zujian&#39;: {
template: &#39;<div>我是局部组件</div>&#39;
}
}
});
Copy after login

//html:

<html>
<head>
    <meta charset="UTF-8" />
    <title>vue2.0组件:</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div>全局组件也必须应用在实例上,不然不显示;</div>
    <hr>
    <div id="app">
        <my-component></my-component>
    </div>
    <div id="app1">
        <my-zujian></my-zujian>
        <my-component></my-component>
    </div>
</body>
</html>
Copy after login

Summary: Global registration can be used anywhere (of course it must be within the jurisdiction of vue); Local registration is only under the current mounted element. You can use

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

Related reading:

Detailed explanation for beginners learning vue

##How to solve the css Hack of IE11

The above is the detailed content of Detailed explanation of Vue 2.0 component registration. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
register components Detailed explanation
source：php.cn
Previous article：Summary of basic JavaScript knowledge (11) Objects and packaging classes Next article：How to switch tabs in Vue2 tab
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
Latest Articles by Author
Latest Issues
Module is not defined in Vue project I just created a new Vue application by running npmini tvue@latest as specified in the off...
From 2023-11-17 12:38:53
0
2
394
Nuxt.js SSG (Static Site Generator) Get API Data When building a project using a static site generator, I understand that documentation cre...
From 2023-11-16 21:36:07
0
1
176
How to understand controlled elements in react How to understand controlled elements in react? Use state control? How to understand contr...
From 2023-11-16 14:51:10
0
1
106
Resolving django.db.utils.NotSupportedError error in Django I'm getting an error when running a project in Django. The problem is unfortunately I upgr...
From 2023-11-14 11:59:20
0
1
246
PHP trim unicode spaces I'm trying to trim unicode spaces such as this character and I was able to do it using thi...
From 2023-11-13 08:49:45
0
2
398
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！