Vue的组件化
组件：
将一个页面复杂的逻辑拆分成一个个小小的功能块，每个功能块都能完成属于自己部分的独立的功能，那么之后整个页面的管理和维护就会变得非常容易
Vue组件化思想：
它提供了一种抽象，让我们可以开发出一个个独立的可复用的小组件来构造我们的应用
任何应用都会被抽象成一颗组件树
组件化思想应用：
有了组件化思想，我们在之后开发中就要充分利用它
尽可能将页面拆分成一个个小的，可复用的组件
这样让我们的代码更加方便组织和管理，并且扩展性也更强
注册组件的基本步骤：
组建的注册分成三个步骤
- 创建组件构造器：调用Vue.extend()方法
- 注册组件：调用Vue.component()方法
- 在Vue实例的作用和范围内使用组件
<div id="app">
<!-- 在Vue实例作用域使用组件 -->
<my-cpn></my-cpn>
</div>
<script src="js/vue.js" ></script>
<script>
//1.创建组件构造器对象
const cpnC = Vue.extend({
template:`
<div>
<h2>title</h2>
<p>hello world</p>
<p>hello Vue</p>
</div>`
})
//2.注册组件
Vue.component('my-cpn', cpnC)
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
全局组件和局部组件：
之前介绍的组件注册使用方法创建的都是全局组件，若要创建局部组件，只需将注册步骤放到需要局部使用的Vue实例对象中声明就可以了
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
'my-cpn': cpnC
}
})
父组件和子组件：
*注：组件的作用域只能包括在所注册的组件内部
注册组件的语法糖：
//注册组件语法糖写法
Vue.component('cpn1', {
template:`
<div>
<h2>这是组件-1</h2>
<p>hello world</p>
<p>hello Vue</p>
</div>`
})
//root组件
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
//局部组件注册语法糖
'cpn2': {
template:`
<div>
<h2>这是组件-2</h2>
<p>hello world</p>
<p>hello Vue</p>
</div>`
}
}
})
组件模板抽离的写法：
刚才我们通过语法糖简化了注册组件过程，另外还有一个地方写法比较麻烦，那就是template模板的写法。
如果我们能将其中HTML分离出来写，然后挂载到对应组件上，必然结构会变得更清晰
Vue提供了两种方案来定义HTML模板内容：
使用script标签
使用template标签
<!-- 组件模板的分离写法 -->
<!-- 1. script标签，注意：类型必须是text/x-template -->
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题2</h2>
<p>我是内容，哈哈哈哈哈</p>
</div>
</script>
<!-- 2. template标签 -->
<template id="cpn">
<div>
<h2>我是标题2</h2>
<p>我是内容，哈哈哈哈哈</p>
</div>
</template>
<script src="js/vue.js" ></script>
<script>
Vue.component('cpn1', {
template:`#cpn`
})
//root组件
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
</body>
组件可以访问Vue实例的数据吗？
答案是不能。
- 组件是一个单独功能模块的封装
- 这个模板有属于自己的HTML模型，也应该有属于自己的数据data。
组件自己的数据存放到哪儿了呢？
- 组件对象也有一个data属性（也可以有methods等属性）
- 只是这个data属性必须是一个函数
- 而且这个函数返回一个对象，对象内部保存着数据
若组件多次使用，那么这几个组件是否共用一个data呢？
答案也是不。
- 每个组件data返回的函数都开辟了一个新的空间，创建了一个新的对象将data的返回值赋给其新建对象。
- 组件中的数据data用函数来表示就是为了达到组件复用数据互不干扰
//组件中数据data用return返回来表示
data() {
return {
count: 0
}
}