一、组件化基本使用过程
- 调用Vue.extend()方法创建组件构造器
- 调用Vue.component()方法注册组件
- 在Vue实例的作用范围内使用组件
调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时,传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方,要显示的HTML代码。
事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用语法糖,但是在很多资料还是会提到这种方式,而且这种方式是学习后面方式的基础。
调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
所以需要传递两个参数: 1、注册组件的标签名2、 组件构造器。
组件必须挂载在某个Vue实例下否则它不会生效。
二、全局组件和局部组件（注册位置不同，在实例中注册）
一、的方法注册的就是全局组件，意味着可以在多个Vue实例下使用，上面案例是在实例app下，那么可以再new Vue一个app2，也能在其中使用。
把注册组件写在对应实例下，就是局部组件了（一般开发用局部更多，创建的实例一般也只有一个）
key:value，标签名:组件名
三、父组件和子组件（注册位置不同，在组件构造器中注册）
在下图cpnC1子组件，cpnC2父组件，父组件可以使用子组件（子组件作用域只在父组件内），可以把const app= new Vue(……)当作root组件。但是此时在app实例下写cpn1标签是会报错的，找不到这个元素；必须在const app= new Vue(……)内再注册一次(如二)才能使用。
四、注册组件语法糖
主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个对象来代替。
全局：
局部：
五、组件模板抽离
六、组件中的数据存储
组件是一个单独功能模块的封装，不能访问实例里面的data。组件对象也有data必须写成函数的样式（每一个组件实例都得是一个对象，data不能共享，如果复用改变一个其他都跟着变了，所以得是函数），而且返回一个对象。
七、父子组件通信
真实的开发中, Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。
1.父传子props
不加v-bind绑定的话，会把引号里的内容作为值。
props的属性有很多，除了上面显示的数组，还能是对象，可以为 props 中的值提供一个带有验证需求的对象。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})2.props如果是驼峰
在绑定时要写成如下图的样子：
3.子传父（自定义事件）
子组件v-on监听要传值出去的(点击)事件(P1)，当点击时便用$emit把数据发射出去(P2)，父组件对应的标签用 v-on 绑定自定义事件(P1)，用绑定的方法接收并处理传递的值(P3)。即是在子组件中,通过$emit()来触发事件,在父组件中,通过v-on来监听子组件事件。
八、父子组件的访问方式（操作对象）
1.父访问子组件
//在子主键加个ref,默认是空的，必须加上一个名字
<npc ref="aaa"></npc>
//在父组件的访问，$ref是个对象类型
this.$ref.aaa2.访问父组件和根组件
用的少
九、slot基本使用
一样的东西封装在组件里面，不一样的预留成插槽。
还可以设置默认值在插槽里面，不覆盖就显示默认值。
十、具名插槽
给插槽一个名字，方便一个组件内需要多个插槽存在。
十一、作用域插槽
1.编译作用域
答案是可以渲染出来。官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。而我们在使用<my-cpn v-show= "isShow"> </my-cpn>的时候,整个组件的使用过程是相当于在父组件中出现的。那么他的作用域就是父组件,使用的属性也是属于父组件的属性。因此, isShow使用的是Vue实例中的属性,而不是子组件的属性。
2.作用域插槽的使用
想要改变列表的样式，于是在使用插槽时想要获取子组件的data()返回值，但是插槽在父组件使用，显然不是一个作用域。解决方案如下图：
通过template去拿到传来的data，然后通过名为slot的slot-scope去引用插槽对象。slot. data. join('-') 可以把数组转化为字符串，并且中间用指定符号链接。
