3.6 parent 和 children
parent:父实例 children:子实例
//父组件
mounted(){
console.log(this.$children)
//可以拿到 一级子组件的属性和方法
所以就可以直接改变data,或者调用methods方法
}
//子组件
mounted(){
console.log(this.$parent)//可以拿到parent的属性和方法
}
children和parent并不保证顺序，也不是响应式的，只能拿到一级父组件和子组件
3.7 $refs
父组件
<home ref='home'/>
mounted(){
console.log(this.$refs.home)//即可拿到子组件的实例，就可以直接操作data和methods
}
3.8 $root
//父组件
mounted(){
console.log(this.$root)//获取根实例，最后所有组件都是挂载到根实例上
console.log(this.$root.$children[0]) //获取根实例的一级子组件
console.log(this.$root.$children[0].$children[0])//获取根实例的二级子组件
}
3.9 .sync
在vue@1.x的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值，在vue@2.0的时候由于违背单项数据流的设计被干掉了；在vue@2.3.0+以上版本又重新引入了这个.sync修饰符：
父组件
编译时会被扩展为
<home :title='title' @update:title='val=>title=val'/>
//子组件
//所以子组件可以通过$emit触发update方法改变
mounted(){
this.$emit('update:title','这是新的title')
}
3.10 v-slot
2.6.0新增 1、slot,slot-cope,scope在2.6.0中都被废弃，但未被移除 2.作用就是将父组件的template传入子组件 3.插槽分类A.；匿名插槽（也叫默认插槽）：没有命名，有且只有一个；
B.具名插槽：相对匿名插槽组件slot标签带name命名的；
C.作用域插槽：子组件内数据可以被父页面拿到（解决了数据只能从父页面传递给子组件）
父组件
{{slotProps.user.firstName}}
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user='user'
// 子组件
3.11 EventBus
1.就是声明一个全局Vue实例变量EventBus，把所有的通信数据，时间监听都存储到这个变量上；
2.类似vuex。但这种方式只适用于极小的项目3.原理就是利用on和emit并实例化一个全局
vue实现数据共享
在main.js中
Vue.prototype.$eventBus = new Vue()
//传值组件
this.$eventBus.$emit('eventTarget','这是eventTarget传过来的值')
接收组件
this.$eventBus.$on("eventTarget",v=>{
console.log('eventTarget',v);//这是eventTarget传过来的值
})
4.可以实现平级，嵌套组件传值，但是对应的事件名eventTarget必须是全局唯一的
3.12 Vie.observable
2.6.0新增用法：让一个对象可响应。observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性则通过返回一个函数viewModule对象中的属性，从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内，并且会发生改变时触发相应的更新。
总结：
1、体量比vuex小，使用维护成本相对较低
2、用于数据共享，当十几个组件同时共用一套数据时，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新。
render函数
1.场景：有些代码在template里面写会重复很多，所以这个时候render函数就有作用了
2.render和template的对比
- render适合复杂逻辑，属于自定义Render函数，性能较高
- template适合逻辑简单，属于声明式渲染，性能较低
5.异步组件
场景：项目过大就会导致加载缓慢，所以异步组件实现按需加载就是必须要做的事了
1、异步注册组件的3种方法
//工厂函数执行 resolve回调
Vue.component('async-webpack-example',function(resolve){
//这个特殊的require语法将会告诉webpack
//自动将你的构建代码切割成多个包，这些包会自动通过Ajax请求加载
require(['./my-async-component'],resolve)
})
//工厂函数返回Promise
Vue.component(
'async-webpack-example',
//这个`import`函数会返回一个`Promise`对象
()=> import('./my-async-component')
)
//工厂函数返回一个配置化组件对象
const AsyncComponent = ()=>({
//需要加载的组件（应该是一个`Promise`对象）
component: import('./MyComponent.vue'),
//异步组件加载时使用的组件
loading:LoadingComponent,
//加载失败时使用的组件
error:ErrorComponent,
//展示加载时组件的延时时间。默认值是200（毫秒）
delay:200,
//如果提供了超时时间且组件加载也超时了，
//则使用加载失败时使用的组件。默认值是：`Infinity`
timeout:3000
})
异步组件的渲染本质上其实就是执行2次或者2次以上的渲染，先把当前组件渲染为注释节点，当组件加载成功后，通过foreceRender执行重新渲染。或者是渲染为注释节点，然后再渲染为loading节点，在渲染为请求完成的组件
2.路由的按需加载
import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。
6.动态组件
场景：做一个tab切换时就会牵涉到组件动态加载
但是这样每次组件都会重新加载，会消耗大量性能，所以使用keep-alive就起到了作用
这样切换效果没有动画效果，这个也不用着急，可以利用内置的
7.components和 Vue.component
8.Vue.extend
场景：vue组件中有些需要将一些元素挂载到元素上，这个时候extend就起到作用了，是构造一个组件的语法器 写法：
//创建构造器
9.mixins
场景：有些组件有些重复的js逻辑，如校验手机验证码，解析时间等，mixins就可以实现这种混入mixins值是一个数组
10.extends
extends用法和mixins很相似，只不过接收的参数是简单的选项对象或构造函数，所以extends只能单次扩展一个组件
const extend={
created(){
this.dealTime()
},
methods:{
dealTime(){
console.log('这是mixin的dealTime里面的方法');
}
}
}
export default{
extends:extend
}
11.Vue.nextTick
2.1.0新增 场景：页面加载时需要让文本框获取焦点
用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
mounted(){//因为mounted阶段dom并未渲染完毕，所以需要$nextTick
this.$nextTick(()=>{
this.$refs.inputs.focus()//通过$refs获取dom并绑定focus方法
}
}
12.Vue.directive
12.1使用
场景：官方给我们提供了很多指令，但是我们如果想将文字变成指定的颜色定义成指令使用，这个时候就需要用到Vue.directive
//全局自定义指令
Vue.directive("change-color",function(el,binding,vnode){
el.style["color"] = binding.value;
})
12.2生命周期
1.bind只调用一次，指令第一次绑定到元素的时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定的元素插入父节点的时候调用（父节点存在即可调用，不必存在document中）
3.update:被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
4.componentUpdate:被绑定的元素所在模板完成一次更新更新周期的时候调用
5.unbind:只调用一次，指令元素解绑的时候调用
13.Vue.filter【vue3中已被废弃】
14 Vue.compile
场景：在render函数中编译模板字符串。只在独立构建时有效
15 Vue.version
场景：有些开发插件需要针对不同vue版本做兼容，所以就回用到Vue.version用法：Vue.version()可以获取vue版本
var version = Number(Vue.version.split('.')[0])
if(version=3){
//vue v3.x
}else if(version=2){
//vue vue2.x.x
}else if(version===1){
//vue v1.x.x
}else{
// Unsupported versions of Vue
}
16.Vue.set()
场景：当你利用索引直接设置一个数组项时或你修改数组的长度时，由于Object.defineprototype()方法限制，数据不响应式更新 不过vue.3.x将利用proxy这个问题将得到解决 解决方案：
17.Vue.config.keyCodes
场景：自定义按键修饰符别名
//将键码为113定义为f2
Vue.config.keyCodes.f2 = 113;
18.v-pre
场景：vue是响应式系统，但是有些静态的标签不需要多次编译，这样可以节省性能
19.v-cloak
场景：在网速慢的情况下，在使用vue绑定数据的时候，渲染页面时会出现变量闪烁
用法：这个指令保持在元素上知道关联实例结束编译。和css规则如：
[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕
20.v-once
场景：有些template中的静态dom没有改变，这时就只需要渲染一次，可以降低性能开销
v-once和v-pre的区别：v-once只渲染一次；v-pre不编译，原样输出
21.事件修饰符
.stop:阻止冒泡
.prevent:阻止默认行为
.self:仅绑定元素自身触发
.once:2.1.4新增，只触发一次
.passive:2.3.0新增，滚动事件的默认行为(即滚动行为)将会立即触发，不能和.prevent一起使用
22.按键修饰符和按键码
//对应键盘上的关键字
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right