私有组件
注册组件的方法中注册的是全局组件,这样就意味着可以在任意的Vue实例中使用组件。
<div id="app">
<my-component></my-component>
<!--这个是comp可以用的 这个是app对象里的私有方法-->
<comp></comp>
</div>
<div id="app2">
<my-component></my-component>
<!--这个掉用不到comp,这个是在app对象里的 没有在app2里-->
<comp></comp>
</div>
<script type="text/javascript">
Vue.component("myComponent",{
template:"<h1>我是一个公共的组件</h1>"
})
let comp=Vue.extend({
template:"<h1>我是一个私有组件</h1>"
})
var app=new Vue({
el:"#app",
components:{
comp
}
})
var app2=new Vue({
el:"#app2",
})
</script>
父子组件
组件与组件之间存在层级关系,这也就是父子组件。组件中也有components关键字,同时使用components将子组件注册到父组件中。
<div id="app">
<parent></parent>
</div>
<script type="text/javascript">
let child=Vue.extend({
template:`
<div>
<h2>我是子组件</h2>
</div>`
})
let parent=Vue.extend({
template:`
<div>
<h1>我是父组件</h1>
<child><child>
</div>`,
components:{
child
}
})
var app=new Vue({
el:"#app",
components:{
parent
}
})
</script>