#搭建Vue+TypeScript项目(七)

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

组件间消息传递

1.父组件->子组件

  #父组件传递消息给子组件
    ##父组件
    
    ##子组件
    @Prop({ default: 1, type: Number })
    flag!: number;
  #父组件使用子组件变量
    (this.$refs.topView as any).data

2.子组件->父组件

#父组件


changeFun(send:any){
  console.log(send);
}
#子组件合适的时机触发
this.$emit('change',996)

3.同级组件传递

#通过共同父级传递的情况
#组件1
点击我触发另一个组件事件
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中
点击我触发另一个组件事件
change() {
  this.$bus.$emit("change", { name: "小小木" });
}
###在组件b中
 mounted() {
  this.$bus.$on("change", (data: object) => {
    console.log(data);
  });
}

4.祖先组件与后代组件

  #祖先给后代组件传值
  祖先
  @Provide()
  flag = "ggsmd";
  后代
  @Inject()
  flag:any
  ##注意不是动态改变的，但是对象指向同一个内存地址，可以改变

  #后代给祖先传值
  #后代
  
点击我给祖先传值
  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.插槽

  #匿名插槽
  #父组件
    我是插槽数据
  #子组件
    

      
    

  #具名插槽及插槽传值
  #父组件
  
  
  
  
  
  #子组件
  

    
    
  

  #传值
  #父组件
  
  #子组件
    
    data: object = {
      name: "996福报",
    };

5.v-model和.sync

#简单实现一个input组件
#父组件
  
  value: any = "";
  inputFun(value: any) {
    this.value = value;
  }
#子组件
  

    
  

  @Prop()
  value: any;

  inputFun(e: any) {
    this.$emit("input", e.target.value);
  }
##使用v-model简化代码
#父组件
  
  value: any = "";
#子组件
  

    
  

  @Prop()
  value: any;

  inputFun(e: any) {
    this.$emit("input", e.target.value);
  }
##还可以通过model更改默认事件，假设是checkbox，不是input
#父组件
  
  value: any = "";
#子组件
  

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

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

#sync 操作符
 sync修饰符类似于v-model，它能用于修改传递到子组件的属性，如果像下面这样写  
  
 等效于下面这行，那么和v-model的区别只有事件名称的变化 
   
  这里绑定属性名称可以随意更改，相应的属性名也会变化
   
  // 所以sync修饰符的控制能力都在父级，事件名称也相对固定update:xx
##例子
#父组件

value: any = "默认value";
#子组件
  

    
{{ username }}
    
点击更改username
  

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