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:'<div>A custom component!</div>'});
/*交换位置会报错----创建组件必须在根实例化之前*///Create root instance:
new Vue({
el:"#app"
})---------
//Local registration :
new Vue({
el: "#app1",
components: {
// <my-zujian> 将只在父组件模板中可用
'my-zujian': {
template: '<div>我是局部组件</div>'
}
}
});//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>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
