table of Contents
One, the declaration of global components
Second, the writing difference between global components and local components
One, the declaration of global components
First of all, I declared vue first according to my usual habit. The code that I wrote seems to have no error on the surface, but it is indeed wrong, and I have been looking for this error for a long time.
The code at the beginning
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script>
var vm = new Vue({
el:"#app"
});
Vue.component('my-component',{
template:"<h1 class ='foo'>这是全局组件</h1>"
})
</script>
Looking for a long mistake, I actually found a sequence problem, global components must first define the component in the definition of vue
Modified code
<script>
Vue.component('my-component',{
template:"<h1 class ='foo'>这是全局组件</h1>"
})
var vm = new Vue({
el:"#app"
});
</script>
Second, the writing difference between global components and local components
- Global components and local components can be written in a div
- The use of global components is to define the components first, in the definition of vue, use Vue.component({})
- The use of local components is written in the defined vue, using components:{}
<body>
<div id="app">
<my-component></my-component>
<br><br><br>
<my-template></my-template>
</div>
</body>
<script>
//全局组件的写法
Vue.component('my-component',{
template:"<h1 class ='foo'>这是全局组件</h1>"
})
var vm = new Vue({
el:"#app",
components:{ //局部组件的写法
'my-template':{template:'<p>这是局部组件</p>'}
}
});
</script>