简体中文(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
1729 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
Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...
From 2024-04-06 22:01:35
0
3
816
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Calculate the sum of fields in another table using MySQL SQL query I have a schema like this: User table with attributes "user_id" and "userna...
From 2024-04-06 19:39:29
0
1
441
How to get the first name from customer_name column selectsubstring(custommer_name,1,instr(custmer_name,''))asfirst_namefromsales.customers; t...
From 2024-04-06 17:43:30
0
2
433
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
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！