前言
学习vue的时候学完模板语法,上来就开始了脚手架,虽然上手快了点,但是感觉还是少了一点衔接,知识遇到了断层,于是自己就再补了一点,理解起来比较顺畅一些。
一、组件化是什么?
vue的核心思想就是数据驱动和组件化,组件化作为vue的重要思想,就是将页面分为多个组件,每个组件实现一个功能块,可以让我们的项目更方便的维护和管理,减少工作量,提高开发效率。
二、注册组件
1.使用步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3.使用组件-->
<!-- 组件必须挂载在Vue实例下,否则不生效-->
<comp></comp>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
//1.创建组件构造器对象
const comp = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容,哈哈</p>
</div>`
})
//2.注册组件,第一个参数是注册组件标签名称,第二个参数是组件构造器
Vue.component('comp',comp)
new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
2.步骤分析
- 1.调用Vue.extend()方法创建了一个组件构造器,传入template写入要显示的html代码
- 2.调用Vue.component()方法注册了一个全局组件,并给它起组件的标签名称
- 3.组件必须挂载到Vue实例下
三、全局组件与局部组件
1.全局组件
上面的例子就是在用全局组件,全局组件的意思就是在本页面中所有的vue实例都可以使用这个组件。
如上面的例子,我再增加一个实例:
<div id="app">
<comp></comp>
</div>
<div id="app2">
<comp></comp>
</div>
再增加一个vue实例:
const app2 = new Vue({
el:"#app2"
})
结果:
结果可以看到页面显示两个组件。
2.局部组件
顾名思义,局部组件将只能在某个vue实例下使用。
将上面的例子改成如下的代码:
const app = new Vue({
el:"#app",
data:{
},
// 2.注册组件(局部组件),只能在本实例中使用
components:{
comp:comp
}
})
const app2 = new Vue({
el:"#app2"
})
结果:
结果可以看到只显示出来一个组件,而app2的实例虽然挂载了comp的组件但是没有显示出来。
总结
创建组件的步骤:
- 1.调用Vue.extend()创建组件构造器;
- 2.调用Vue.component()注册组件,第一个参数是组件标签名称,第二个参数是组件;
- 3.将组件挂载到Vue实例下。
全局组件与局部组件
- 全局组件页面中所有vue实例都可以调用这个组件,语法是Vue.component(“组件标签名”,组件名)
- 局部组件只能在某个vue实例里使用这个组件,语法时在vue实例里与data,methods同级书写components:{组件标签名:组件}