组件化
1 注册组件基本步骤
1）创建组件构造器 社区
其中，在ES6 用 ` 来修饰template里的内容（键盘Esc下面的键）可直接将内容进行换行。
2）注册组件
3）使用组件 
2 全局组件、局部组件
1.全局组件，直接写在外部 
在构造的多个Vue实例中使用
2.局部组件，需写在Vue实例里面的 
只可在这一个实例内使用
3 父组件、子组件
组件构造器中也可声明注册组件 
直接在实例中使用标签，就可将cpn1与cpn2一起显示出来
4注册组件语法糖
全局组件 语法糖形式： 
局部组件 语法糖形式：
5模板抽离
分两种方式： 1）script标签，类型为text/x-template 
2）template标签 不管注册全局还是局部组件,统一格式为：
template:'#id名称'
6模板数据存放
data必须是一个函数，返回一个对象，在该对象中定义。为什么必须是函数？
在组件复用时，函数有自己的作用域，防止出现多处复用对同一属性操作的情况。可以使大家各用各的、互不影响。
7父子组件通信
父——>子 通过props
子——>父 通过事件 $emit
1）父向子 props用法
两种方式： 字符串数组，数组中的字符串即为传递时的名称
对象，对象可设置传递时类型，也可设置默认值
字符串数组形式： 
其中最关键的一步为：
对象类型形式：基础类型 
自定义类型： 
!!!驼峰命名法使用时需稍作调整
2)子向父通信（自定义事件）
通过发射事件，向父层组件传递信息 
调用父层方法函数
！！父子通信双向绑定
实现双向绑定时，需在components里额外设置数据值进行绑定，不可直接将props里的值绑定。 
另外一种方式： 其中，watch属性对应对象类型，其中的函数是用来监听某个值发生改变，（监听哪个属性就起什么名称，名称要一致！！！） 形式：
watch:{
名称（newvalue,oldvalue）{
}
}
8 父子组件访问方式
父->子
使用 $children 或 $refs
子->父
使用 $parent $root(直接访问根)
1)$children
父组件的方法中，通过$children可直接拿到子组件对象，是个数组形式。
2）$refs
只需在调用组件时ref属性加上key值，通过key值可以获取到特定的子组件对象。
3）$parent 和 $root
9 组件化开发高级
9.1 slot插槽
可进行元素替换，可实现多标签同时替换，不设置时显示默认设置
具名插槽
在 < slot>里定义name属性 
根据替换标签里的slot属性值，找到对应位置进行替换 显示如下：
10 编译作用域
变量属性只在自己的作用域内起作用，如图中Vue实例里的isShow只能作用在id=‘app’内
10.1 作用域插槽
父组件替换插槽标签，内容由子组件提供 
显示效果： 另外一种写法：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/2637.html
