给子组件加上原生事件

<button class="button" @click="$emit('click',$event)" >

//之后在使用本Button组件时，肯定要有点击事件。但是Button组件的点击事件其实没有的，所以加上这句话 //button被点击了，就会触发Button组件的点击事件

或者直接在使用Button子组件的时候<Vutton @click.native="xxx">加个.native（ .native主要是给自定义的组件添加原生事件。）

表驱动编程--关于class

<li v-for="tag in tagList" :key="tag.id"
          :class="{selected: selectedTags.indexOf(tag)>=0}"
          @click="toggle(tag)">{{tag.name}}
</li>

遍历tagList中的每一个标签，都建立一个li，每个li都有click事件和class：selected。但是特殊的是，class：selected要ture才真的会有，false的话就相当于没写。而click事件决定true或者false

点击，那就为true，那就有class；
在点击，那就为false，那就没有class。
从未点击那就为false，那就没有class

:class="{ [classPrefix + '-tabs-item']: classPrefix, selected: item.value === value }"

:后面为true才给加上这个class
如果key键名里面有变量，就把键名用中括号包起来就行

如何在父组件里对子组件添加CSS样式

deep

父组件又要用scoped，又想操作子组件里的元素的样式。就可以用::v-deep或者/deep/。前者兼容性更好

<style scoped lang="scss">
  ::v-deep 子组件元素的选择器 {}
</style>

给class加前缀

子组件

让子组件接受一个外部数据classPrefix@Prop(String) classPrefix?: string;
子组件里哪个元素想要被父组件操作，那就在那个元素加上

<li :class="{ [classPrefix + '-content']: classPrefix }"
 </li>

只有父组件在使用本子组件的时候传classPrefix的值给我，我才会在我的li元素里加上这个class

父组件

那么父组件在使用本子组件的时候传classPrefix的值给子组件,//这样子组件的li元素就有个class叫xxx-content

<Child class-prefix="xxx" />

那么父组件就可以在父组件里对选择器.xxx-content加css样式了，但是不能scoped(只对当前组件的选择器有用，.xxx-content还是在子组件里的）。
所以父组件可以再建一个没有scoped的<style lang="scss">，让.xxx-content在这里面操作

<style lang="scss">
.xxx-content{}
</style>

但是如果有了deep，还是可以在有scoped的<style>标签里写的

好处

很多父组件都可以使用这个子组件，然后每个父组件使用的时候li元素都有属于特定的class：xxx-content yyy-content zzz-content 。那也可以有特定的css样式

<template>
    <Tabs class-prefix="xxx" />
    <Tabs class-prefix="yyy"/>
</template>

<style scoped lang="scss">
  ::v-deep .xxx-content {}
  ::v-deep .yyy-content {}
</style>

共享CSS

新建src/assets/style/helper.scss

只要导入即可使用传送门

全局的src/custom.d.ts

声明在里面的类型是全局的，哪里都可以用

type RecordItem = {
  tags: string[];
  notes: string;
  type: string;
  amount: number;
  createdAt?: Date ;
}
type Tag = {
  id: string;
  name: string;
}
type TagListModel = {
  data: Tag[];
  fetch: () => Tag[];
  create: (name: string) => 'success' | 'duplicated'; // 联合类型
  save: () => void;
  update: (id: string, name: string) => 'success' | 'not found' | 'duplicated';

  remove: (id: string) => boolean;
}

interface Window {
  store: {
    tagList: Tag[];  //声明window有个属性tagList
    createTag: (name: string) => void;
    removeTag: (id: string) => boolean;
    updateTag: (id: string, name: string) => 'success' | 'not found' | 'duplicated';
    findTag: (id: string) => Tag;

    recordList: RecordItem[];
    createRecord: (record: RecordItem) => void;
  };

}

随记