梳理vue常用知識(shí)，自用
最好的行為是看官方文檔，比我全

組件間消息傳遞

1.父組件->子組件

  #父組件傳遞消息給子組件
    ##父組件
    <topView ref="topView" :data="flag"></topView>
    ##子組件
    @Prop({ default: 1, type: Number })
    flag!: number;
  #父組件使用子組件變量
    (this.$refs.topView as any).data

2.子組件->父組件

#父組件
<topView @change="changeFun" ref="topView" :data="flag"></topView>

changeFun(send:any){
  console.log(send);
}
#子組件合適的時(shí)機(jī)觸發(fā)
this.$emit('change',996)

3.同級(jí)組件傳遞

#通過(guò)共同父級(jí)傳遞的情況
#組件1
<div @click="change">點(diǎn)擊我觸發(fā)另一個(gè)組件事件</div>
change(){
  this.$parent.$emit('change',996)
}
#組件2
mounted() {
  this.$parent.$on("change", (data: any) => {
    console.log(data);
  });
}

#通過(guò)公共bus類(lèi)來(lái)實(shí)現(xiàn)
class Bus {
  callback: any = {};
  constructor() {
    this.callback = {};
  }
  $on(name: string, fn: Function) {
    this.callback[name] = this.callback[name] || [];
    this.callback[name].push(fn);
  }
  $emit(name: string, argus: object) {
    this.callback[name].forEach((element: Function) => {
      element(argus);
    });
  }
}
export default Bus;
##使用
###在main.ts
Vue.prototype.$bus = new Bus();
####
#ts需要增加types
#在根目錄下新建types文件夾。新建vue.d.ts文件
import Vue from "vue";
declare module "vue/types/vue" {
  interface Vue {
    $bus: any;
  }
}
###在組件a中
<div @click="change">點(diǎn)擊我觸發(fā)另一個(gè)組件事件</div>
change() {
  this.$bus.$emit("change", { name: "小小木" });
}
###在組件b中
 mounted() {
  this.$bus.$on("change", (data: object) => {
    console.log(data);
  });
}

4.祖先組件與后代組件

  #祖先給后代組件傳值
  祖先
  @Provide()
  flag = "ggsmd";
  后代
  @Inject()
  flag:any
  ##注意不是動(dòng)態(tài)改變的，但是對(duì)象指向同一個(gè)內(nèi)存地址，可以改變

  #后代給祖先傳值
  #后代
  <div @click="dispatch('change', '996福報(bào)')">點(diǎn)擊我給祖先傳值</div>
  dispatch(eventName: string, argus: any) {
    let parent = this.$parent;
    while (parent) {
      parent.$emit(eventName, argus);
      parent = parent.$parent;
    }
  }
  #祖先
  async mounted() {
    this.$on("change", (data: any) => {
      console.log(data);
    });
  }

5.插槽

  #匿名插槽
  #父組件
    <son>我是插槽數(shù)據(jù)</son>
  #子組件
    <div class="son">
      <slot></slot>
    </div>

  #具名插槽及插槽傳值
  #父組件
  <son>
  <template v-slot:default> <div>我是默認(rèn)插槽</div> </template>
  <template v-slot:content> <div>我是content插槽</div> </template>
  </son>
  
  #子組件
  <div class="son">
    <slot></slot>
    <slot name="content"></slot>
  </div>

  #傳值
  #父組件
  <son><template v-slot:content="flag">
        <div>{{ flag.data.name }}</div>
      </template></son>
  #子組件
    <slot name="content" :data="data"></slot>
    data: object = {
      name: "996福報(bào)",
    };

5.v-model和.sync

#簡(jiǎn)單實(shí)現(xiàn)一個(gè)input組件
#父組件
  <son :value="value" @input="inputFun"></son>
  value: any = "";
  inputFun(value: any) {
    this.value = value;
  }
#子組件
  <div class="son">
    <input type="text" :value="value" @input="inputFun" />
  </div>

  @Prop()
  value: any;

  inputFun(e: any) {
    this.$emit("input", e.target.value);
  }
##使用v-model簡(jiǎn)化代碼
#父組件
  <son v-model="value"></son>
  value: any = "";
#子組件
  <div class="son">
    <input type="text" :value="value" @input="inputFun" />
  </div>

  @Prop()
  value: any;

  inputFun(e: any) {
    this.$emit("input", e.target.value);
  }
##還可以通過(guò)model更改默認(rèn)事件，假設(shè)是checkbox，不是input
#父組件
  <son v-model="value"></son>
  value: any = "";
#子組件
  <input type="checkbox" @change="checked" :checked="checked" />

  @Model("change", { type: Boolean })
  checked!: boolean;

  #類(lèi)似于
  //類(lèi)似于
  export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

#sync 操作符
 sync修飾符類(lèi)似于v-model，它能用于修改傳遞到子組件的屬性，如果像下面這樣寫(xiě)  
 <Input :value.sync="username"> 
 等效于下面這行，那么和v-model的區(qū)別只有事件名稱(chēng)的變化 
  <Input :value="username" @update:value="username=$event"> 
  這里綁定屬性名稱(chēng)可以隨意更改，相應(yīng)的屬性名也會(huì)變化
  <Input :foo="username" @update:foo="username=$event"> 
  // 所以sync修飾符的控制能力都在父級(jí)，事件名稱(chēng)也相對(duì)固定update:xx
##例子
#父組件
<son :username.sync="value"></son>
value: any = "默認(rèn)value";
#子組件
  <div class="son">
    <div>{{ username }}</div>
    <div @click="changename">點(diǎn)擊更改username</div>
  </div>

  @Prop()
  username: any;
  changename() {
    this.$emit("update:username", "1231");
  }