一般的应用,会拥有一个根实例,在根实例里面都是一个一个的组件。
因为组件是要嵌入到实例或者父组件里的,也就是说,组件可以互相嵌套
所有的组件最外层必须有一个根实例
组件分为:全局组件和局部组件
全局组件在任意的实例、父级组件中都能使用,局部组件只能在创建自己的父级组件或者实例中使用
全局注册组件:
Vue.component("zidingyi", {
template: `<h1>我是一个全局组件</h1>`
})
使用全局组件: 在任意的vue视图中
<div id="app">
<zidingyi></zidingyi> <!--在第一个挂载点内使用-->
</div>
局部注册组件: 写在了某个Vue实例内 注意是components 带s 表示复数
var v1 = new Vue({
el: "#app",
// components配置项用于定义组件 因为写在了某个Vue实例内 所以只能在这个实例内使用 所以叫做局部组件
components: {
// 属性名表示组件名
// 属性值是一个对象
zidingyi: {
template: `<h1>我是一个局部组件</h1>`
}
}
})
<div id="app">
<zidingyi></zidingyi> <!--在第一个挂载点内使用-->
</div>
<hr>
<div id="app1">
<zidingyi></zidingyi> <!--在第二个挂载点内不能使用第一个的组件-->
</div>
局部组件只能在所在的Vue实例内使用
也可以这样定义
// 定义全局组件
Vue.component("zidingyi", {
template: "#tpl",// template这里 既可以写具体的html标签字符串 也可以写选择器
})
var v1 = new Vue({
el: "#app",
data: {}
})
<div id="app">
<zidingyi></zidingyi>
</div>
<!-- 可以把组件的html结构写在 template标签内,相当于是一个模板 通过id进行关联 -->
<template id="tpl">
<h1>我是一个组件</h1>
</template>