vue踩坑记（随时补充）

watch

1. handler：执行器
2. deep：深度监听
3. immediate：立即执行

ref

生命周期

不能在模板上直接 $refs.refName 获取元素，因为此时还没绑定上 ref

v-for

v-for 下, ref 会变成数组

<div v-for="item in list" ref="list"></div>

this.$refs.list // 数组，存放所有 div

slot

使用形式与简写

组件中使用

<slot name="header"></slot>		<!-- name：具名还是匿名 -->
<slot :value="value"></slot>		<!-- 传递属性：作用域插槽 -->

this.$slots 访问静态插槽
this.$scopedSlots 访问作用域插槽

调用

<template v-slot:header></template>
<template v-slot:default="prop"></template>

<template #default="{value}"></template>		<!-- 简写 name，解构 prop -->

component 动态组件

component 必须是 :is 动态绑定

<component :is="compname"></component>

跨层级通信

eventBus

provide/inject

// parent.vue
import Vue from 'vue'

export default {
 data() {
   return {
     eventBus: new Vue()
   }
 },
 
 provide() {
   return {
     eventBus: this.eventBus
   }
 },

 created() {
 	this.eventBus.$on(
 	  "everyOneCanCall", 
 	  (caller) => console.log(`from ${caller}`)
 	)
 },
}

// child.vue
export default {
 inject: ["eventBus"],
 
 mounted() {
 	this.eventBus.$emit("everyOneCanCall", "child")
 },
}