Vue-cli3 + typescript 修饰符的基本使用和父

我们以封装的element-UI的分页组件为例。

下面是子组件代码。

<template>
  <div class="page">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script lang='ts'>
// 引入-导出用到的修饰符
import { Vue, Component, Watch, Prop, Emit } from "vue-property-decorator";
// 接口定义对象，不定义，无法正常使用，像js一样".属性"---->另外一种解决方法，as断言---->any类型都可以获取到里边的内容。
interface ParamsObj {
    pageNum: number,
    pageSize: number
}
// 组件修饰符
@Component({
    components: {}
})
// 导出class--->pages--->是vue的子集
export default class pages extends Vue{
    // private 声明params变量，使用范围，在类的里边。
    private params: ParamsObj = {
        pageNum: 1,
        pageSize: 10
    };
    // 声明周期
    mounted() :void {
        // console.log(this);
    }
    // prop父传子的参数
    @Prop({
        type: Number,
        required: true,
        default: 0
    })
    // !: 基本理解为必填、选填声明
    private total!: number;
    // 监听传过来的值
    @Watch('total')
    private changeTotal(newVal: number) {
        console.log(newVal);
    }
    // 子传父开始
    @Emit()
    private handleToParent(): string {
        return '123';
    }

    // 定义函数
    private handleSizeChange(val: number) :void {
        this.params.pageSize = val;
    }
    // 定义函数
    private handleCurrentChange(val: number) :void {
        this.params.pageNum = val;
        // 调用子传父
        this.handleToParent();
    }
    
}
</script>

下面是父组件代码

<template>
  <div class="home">
    <h1>home</h1>
    <!-- 调用跟之前vue的一样 -->
    <pages :total='20' @handle-to-parent='toChildren' />
  </div>
</template>

<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import {add} from '../api/home';
import pages from '../components/page.vue';
// 使用component修饰符声明、定义组件
@Component({
    components: {
      pages: pages
    }
})
// 导出class--->home--->是vue的子集
export default class home extends Vue{
  mounted() :void {
    // console.log(this);
    this.EV();
  // 调用refs的值
  console.log(this.loginForm);
  }
  protected EV() :void {
    // this.$message如何使用上一篇文章有提到。请自行查阅
      this.$message({
        type: 'success',
        message: '测试this.$message使用'
      });
  }
  // 子传父 回调函数
  private toChildren(val: string) :void {
    // 子组件传过来的值
    console.log(val);
  }
// ()中写绑定组件的ref值
  @Ref('pages') public readonly loginForm!: pages;
}
</script>

SFC 单 vue 文件组件的基本写法和结构

<template>
  <!-- 结构示例，指令基础用法同vue -->
  <div class="minos-system-setting" v-if="hideHeader">
    <h3>结构示例</h3>
    <span>{{ selfKey1 }}</span>
    <ul>
      <li :key="item" v-for="item in fatherKey">{{ item }}</li>
    </ul>
    <button @click="addText">追加文字</button>
    <AnotherVue
      :class="['default-class', selfKey1.length > 10 ? 'one' : 'two']"
    />
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Prop, Watch } from "vue-property-decorator";
  import { Route } from "vue-router";
  import AnotherVue from "@/components/AnotherVue.vue";
  @Component({
    // 组件注册
    components: {
      AnotherVue
      // 'another-vue': AnotherVue
    },
    // 过滤器
    filters: {
      filterFn1() {}
    },
    // 属性传递
    props: {
      hideHeader: {
        type: Boolean,
        required: false,
        default: false // 默认属性的默认值
      }
    }
  })
  export default class ComponentName extends Vue {
    @Prop({
      type: Boolean,
      required: false,
      default: false // 默认属性的默认值
    })
    private hideHeader!: boolean | undefined;
    @Prop() private fatherKey: string[]; // 其他没有默认值的传值
    selfKey1: string = "自己的一个变量";
    // 生命周期
    created() {}
    mounted() {}
    // 计算属性
    get computedKey() {
      return this.selfKey1.length;
    }
    // 监听器
    @Watch("computedKey")
    getcomputedKey(newVal) {
      console.log(newVal);
    }
    // 导航守卫函数
    private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
      console.log("beforeRouteEnter", to, from, next);
      next();
    }
    // 方法
    addText() {
      this.selfKey1 += "，追加文字！";
    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/demo.scss";
</style>