什么是组件
简单理解:大问题拆分成小问题
组件化:将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,使得整个界面的管理和维护变得容易。
vue的组件化思想:模块
提供一种抽象,开发出一个个独立可复用的小组件来构造应用。
任何的应用都会被抽象成一棵组件树。
注册组件的基本步骤
- 创建组件构造器Vue.extend({template:})
- 注册组件Vue.component(标签名,组件构造器)
- 使用组件Vue实例范围内
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
</body>
<script>
//ES6语法``定义字符串时可换行
//1.创建组件构造器对象
const cpnc = Vue.extend({
template:`
<div>
<h2>标题我</h2>
<p>现在我</p>
</div>`//传入template定义组件模板
})
//2.注册
Vue.component('my-cpn',cpnc)//构建自己的组件my-cpn
//3.使用
const app=new Vue({
el:'#app'
})
</script>
组件的语法糖注册方式:
<script>
Vue.component('cnp2',{//全局组件
template:`
<div>
<h2>标题我</h2>
<p>现在kkk</p>
</div>`
})
const app=new Vue({//局部组件
el:'#app',
components:{
//cpn使用组件时的标签名
'cpn':{
template:`
<div>
<h2>标题我</h2>
<p>现在kkk</p>
</div>`
}
}
})
</script>
全局&局部
- 全局组件:可在多个Vue实例下使用
- 局部组件:在某个Vue实例下注册,属性:components
<script>
const app=new Vue({
el:'#app',
components:{
//cpn使用组件时的标签名
cpn:cpnC
}
})
</script>
父组件&子组件
在父组件创造时声明嵌套子组件
<script>
const cpnC1 = Vue.extend({
template:`
<div>
<h2>标题我</h2>
<p>现在kkk</p>
</div>`
})
const cpnc = Vue.extend({
template:`
<div>
<h2>标题我</h2>
<p>现在我</p>
</div>`,
components:{
cpn1:cpnC1
}
})
</script>