全局组件
组件可以扩展 HTML 元素，封装可重用的代码。
组件是可复用的 Vue 实例，且带有一个名字。
1.创建步骤：
创建组件构造器
var myton=Vue.extend({
//data必须是个函数
data:function () {
return{
count:0
}
},
//模板选项
template:'<div><h1>哈哈哈</h1><button @click="count++">你点击了{{count}}次了</button></div>'
})
注册一个全局的组件
Vue.component('ton',myton);
使用组件
<div id="app">
<ton></ton>
</div>
全部代码如下：
<body>
<div id="app">
<ton></ton>
</div>
</body>
<script>
var myton=Vue.extend({
//data必须是个函数
data:function () {
return{
count:0
}
},
//模板选项
template:'<div><h1>哈哈哈</h1><button @click="count++">你点击了{{count}}次了</button></div>'
})
Vue.component('ton',myton);
new Vue({
el:"#app"
});
</script>
运行结果：
2.可以简化组件注册
<body>
<div id="app">
<ton></ton>
</div>
</body>
<script>
Vue.component('ton',{
//data必须是个函数
data:function () {
return{
count:0
}
},
//模板选项
template:'<div><h1>哈哈哈</h1><button @click="count++">你点击了{{count}}次了</button></div>'
});
//组件注册必须位于创建vue实例之前
new Vue({
el:"#app"
});
</script>
3.全局组件每个vue实例都可以用
<body>
<div id="app">
<ton></ton>
</div>
<div id="app1">
<ton></ton>
</div>
</body>
<script>
Vue.component('ton',{
//data必须是个函数
data:function () {
return{
count:0
}
},
//模板选项
template:'<div><h1>哈哈哈</h1><button @click="count++">你点击了{{count}}次了</button></div>'
});
new Vue({
el:"#app"
});
new Vue({
el:"#app1"
});
</script>
运行结果：
4.注意事项
组件注册必须位于创建实例之前。
一个组件的 data 选项必须是一个函数