【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()
  }
}