依赖注入

1. 依赖注入

1. 子孙级组件想要使用父组件的属性的方法 * 一个个传递传递到子孙级为止 * 使用依赖注入

2. 流程： * 需要在有数据的组件中向外暴露出去一个数据provide js provide(){ return{ msg:this.msg } } * 需要在想要使用数据的组件中接受这个暴露的数据inject js inject:['msg']

3. 透传属性 * 其实就是在父组件给子组件绑定属性的时候子组件没有书写props接受,那么这个属性会直接绑定到子组件的根标签上

4. 插槽 * 预留一个接口，等待外部传输数据：标签为slot * 经过第一步后已经有一个插槽位置了等待连接

5. 具名插槽 * 具名插槽在放置接口的时候需要给接口配置一个name属性，属性值就是这个接口的名字 * 将内容书写在template标签中，借助一个内置指令v-slot：给当前数据放在哪个接口中

6. 作用域插槽 * 作用于插槽在书写接口时除了可以书写一些对应的名字还可以书写一些数据 * 在使用的时候v-slot:给一个插槽的名字='变量名'，这个变量接收的是一个对象，这个对象中有什么属性取决于你书写接口时有什么数据

2. 异步组件

3. 自定义指令

1. 如果想要自定义一些指令需要添加一个配置项directives

directives:{}

2. 指令名在注册的时候不需要加v-但是在使用时要加上v-

focus:{}

3. 在你创建的指令中添加生命周期钩子

  const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    <!-- 这个钩子用的最多，input框有一个属性focus获取焦点 -->
    <!-- el代表这个dom节点也就是el.focus()可以自动获取焦点 -->
    <!-- binding是一个对象可以拿到指令后面书写的所有代码 -->
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
  }

4. 内置指令

1. v-pre：标签添加当前指令后不再接受vue的解析了，所有vue的语法都不在生效了

2. v-once：标签添加后只会被解析渲染一次，后续不会再被vue解析渲染了

3. v-memo:[响应式数据1，响应式数据2] 只有响应式数据发生变化之后它对应的标签才会被重新渲染

4. v-cloak：是当前指令跟css结合能够在vue没有绑定成功的时候，对当前dom做一些操作，在css中直接[v-cloak]就可以获取到这个标签

[v-cloak] {
  display:none
}

5. 动态组件

1. 需要借助component标签并借助is属性绑定一个组件变量的名字 * * component是将组件添加或者移出dom节点从而完成的

6. 内置组件

1. keepAlive：如果组件使用keepAlive之后进行组件切换会将组件缓存 html <keep-alive> <component> </component> </keep-alive> html <span @click="cId = 'index'">首页</span> <span @click="cId = 'fenl'">分类</span> <span @click="cId = 'cart'">购物车</span> <span @click="cId = 'my'">我的</span> * keepAlive 会把里面的东西缓存但是只能缓存一个

2. 想让谁有缓存 * include/exclude内部需要书写的是component的name属性 html <keep-alive :include='['index','fenl']'> <component> </component> </keep-alive>

3. 排除缓存： html <keep-alive :exclude='['cart','my']'> <component> </component> </keep-alive>

4. transition * 内置组件 * 作用：帮我们添加一些类名

5. transitionGroup * 内置组件 * 作用：帮我们添加一些类名

6. teleport * 作用：会把我们所写的所有标签传送到to属性所属的标签里

7. this.$data * 你所代理到的数据