随手记 Vue 总结

Posted on

Vue 组件的三种方式（单文件组件）

  1. 用 JS 对象

    1
    export default { data, props, methods, created, ...}

  2. 用 TS 类 <script lang="ts">

    1
    2
    3
    4
    5
    @Component
    export default class XXX extends Vue{
        xxx: string = 'hello';
        @Prop(Number) xxx: number | undefined;
    }

  3. 用 JS 类 <script lang="js">

    1
    2
    3
    4
    @Component
    export default class XXX extends Vue{
        xxx = 'hi'
    }

引入 SVG Icon

  1. 在 src/shims-vue.d.ts 中添加
1
2
3
4
declare module "*.svg" {
  const content: any;
  export default content;
}
  1. 安装 svg-sprite-loader
1
yarn add svg-sprite-loader -D

引入 svg 目录

封装 Icon 组件时，直接引入真个图标文件，避免了一个个引入。demo

1
2
let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (e) { console.log(e); }

组件点击事件传递

封装组件时遇到的一个问题：

button 里加了一个 icon 组件，当在 button 上写点击事件时，会没有用，因为点击的是 icon 组件里面的元素。

解决方法：

在 icon 组件里写一个 $emit， 它被点击时，触发外面的点击事件

Labels.vue

1
2
3
4
<li v-for="(item, index) in this.outputTags" :key="index">
    ...
   <Icon :name="'delete2'" @click="deleteTag(item.id)"></Icon>
</li>

Icon.vue

1
2
3
4
5
6
// 触发点击事件，这样父组件就可以监听到了
<template>
  <svg class="icon" @click="$emit('click',$event)">
    <use v-bind:xlink:href="'#'+name"/>
  </svg>
</template>