组件化
组件化的思想:我们一般将一个页面中所有的处理逻辑全部放在一起,处理起来比较复杂,而且不利于后续的管理以及扩展。现在我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己部分独立的功能,这样就使整个页面的管理和维护更加容易
Vue组件化思想:它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用,任何的应用都会被抽象成一颗组件树
组件的使用分成三个步骤:
1.创建组件构造器,调用Vue.extend()创建的是一个组件构造器,通常在创建组件构造器时,传入template代表我们自定义组件的模板,该模板就是在使用到组件的地方要显示的HTML代码
2.注册组件,Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称,所以要传递两个参数:(1)注册组件的标签名,(2)组件构造器
3.使用组件,组件必须挂载在某个Vue实例下,否则它不会生效
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
//2.注册组件
Vue.component("my-cpn",cpnC)
const app=new Vue({
el:"#app",
data:{
message:'hello'
}
})
</script>
全局组件和局部组件
<body>
<div id="app">
<!-- 3.使用组件 -->
<cpn></cpn>
</div>
<div id="app2">
<!-- 使用局部组件cpn在当前组件不起作用 -->
<cpn></cpn>
</div>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
//2.注册组件(全局组件,意味着可以在多个vue的实例下面使用)
//Vue.component("cpn",cpnC)
const app=new Vue({
el:"#app",
data:{
message:'hello'
},
//局部组件,只在当前组件有效
components:{
//cpn使用组件时的标签名
cpn:cpnC
}
})
const app2=new Vue({
el:"#app2"
})
</script>
</body>