【vue前端】关于ts项目中常见写法的一些总结

1、目录如下：

 

 2、源码如下

child.vue

<template>
  <div>
    <div>{{ propVal }}</div>
    <el-button @click="emitVal('我是儿子')">我是子组件</el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, Emit, Model, Ref } from 'vue-property-decorator'

@Component({
  name: 'Child'
})
export default class Child extends Vue {
  @Prop() private propVal: any
  // Emit子组件触发
  @Emit('emitValFun')
  private emitVal(val: string) {
    return val
  }
  // Model
  @Model('click') readonly value!: string
}
</script>

<style lang="scss" scoped></style>

index.vue

<template>
  <div>
    <el-button>我是父组件</el-button>
    <child :propVal="propVal" @emitValFun="selfFun" value="我是value"></child>
    <div id="login_container"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Emit, Model, Ref } from 'vue-property-decorator'
import child from './child.vue'
import Mixin from './mixins'

interface stringVAl {
  form: string
}
@Component({
  name: 'my',
  components: {
    child
  },
  mixins: [Mixin]
})
export default class Test extends Vue {
  private text: stringVAl = {
    form: '字符串'
  }
  private propVal: any = '父组件给子组件传值'
  // 监听
  @Watch('text', { deep: true })
  changeText(val: any) {
    console.log('watch监听')
  }
  // 计算属性监听
  get textVAl() {
    return this.text
  }
  // Emit父组件接收
  selfFun(q: string) {
    console.log(q, '父组件接收子组件值')
  }

  setWxerwma() {
    // const obj = new WxLogin({
    //   self_redirect: true,
    //   id: 'login_container', // 需要显示的容器id
    //   appid: 'wxef5765dd395d8504', // 公众号appid wx*******
    //   scope: 'snsapi_login', // 网页默认即可
    //   redirect_uri: encodeURIComponent('https://passport.zcool.com.cn/thirdlogin/wechat_callback.do?appId=1006'), // 授权成功后回调的
    //   state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
    //   style: 'black', // 提供"black"、"white"可选。二维码的样式
    //   href: 'https://static.zcool.cn/passport4.0/css/wxCode.css?v=0.1' // 外部css文件url，需要https
    // })
  }
  mounted() {
    this.setWxerwma()
  }
}
</script>

<style lang="scss" scoped></style>

minixs.vue

/**
 * 这个组件完全依赖于vue-class-component.它具备以下几个属性:
@Component (完全继承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定义);

作者：Homary
链接：https://www.jianshu.com/p/d8ed3aa76e9b
 */

import { Vue, Component, Ref, Watch } from 'vue-property-decorator'

@Component
export default class Mixin extends Vue {
  testFun() {
    console.log('11111111111111111111')
  }
  mountedFun() {
    console.log('2222222222222222222')
  }
  created() {
    this.testFun()
  }
  mounted() {
    this.mountedFun()
  }
}