#搭建Vue+TypeScript项目(七)

梳理vue常用知识，自用
最好的行为是看官方文档，比我全

组件间消息传递

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);
}
#子组件合适的时机触发
this.$emit('change',996)

3.同级组件传递

#通过共同父级传递的情况
#组件1
<div @click="change">点击我触发另一个组件事件</div>
change(){
  this.$parent.$emit('change',996)
}
#组件2
mounted() {
  this.$parent.$on("change", (data: any) => {
    console.log(data);
  });
}

#通过公共bus类来实现
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">点击我触发另一个组件事件</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
  ##注意不是动态改变的，但是对象指向同一个内存地址，可以改变

  #后代给祖先传值
  #后代
  <div @click="dispatch('change', '996福报')">点击我给祖先传值</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>我是插槽数据</son>
  #子组件
    <div class="son">
      <slot></slot>
    </div>

  #具名插槽及插槽传值
  #父组件
  <son>
  <template v-slot:default> <div>我是默认插槽</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福报",
    };

5.v-model和.sync

#简单实现一个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简化代码
#父组件
  <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);
  }
##还可以通过model更改默认事件，假设是checkbox，不是input
#父组件
  <son v-model="value"></son>
  value: any = "";
#子组件
  <input type="checkbox" @change="checked" :checked="checked" />

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

  #类似于
  //类似于
  export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

#sync 操作符
 sync修饰符类似于v-model，它能用于修改传递到子组件的属性，如果像下面这样写  
 <Input :value.sync="username"> 
 等效于下面这行，那么和v-model的区别只有事件名称的变化 
  <Input :value="username" @update:value="username=$event"> 
  这里绑定属性名称可以随意更改，相应的属性名也会变化
  <Input :foo="username" @update:foo="username=$event"> 
  // 所以sync修饰符的控制能力都在父级，事件名称也相对固定update:xx
##例子
#父组件
<son :username.sync="value"></son>
value: any = "默认value";
#子组件
  <div class="son">
    <div>{{ username }}</div>
    <div @click="changename">点击更改username</div>
  </div>

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