• 周五. 2月 23rd, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

vue3 CompositionAPI 函数以及变量抽离成单独的文件

admin

11月 28, 2021

新建hooks.ts

import { ref, onMounted } from ‘vue’

export default function useRooks() {
  const list = ref<any>([])
  const showShare = ref<boolean>(false)
  const onShow = () => {
    showShare.value = true
  }

  const onHandle = () => {
    getdata()
  }

  let time = 1
  let data = [{}]
  const getdata = () => {
    time = time + 1
    console.log(time)
    new Promise((resolve, reject) => {
      data = […data, {}]
      list.value = data
      resolve(true)
    })
  }

  onMounted(() => {
    getdata()
  })

  return {
    getdata,
    list,
    onShow,
    showShare,
    onHandle,
  }
}
<template>
  <div>
    <button @click=”onShow”>分享</button>
    <button @click=”onHandle”>测试hooks</button>
  </div>
</template>

<script lang=”ts”>
import { defineComponent } from ‘vue’
import useRooks from ‘./hooks/index’
export default defineComponent({
  components: { share, Rotate },
  setup() {
    const { list, getdata, showShare, onShow, onHandle } = useRooks()
    return {
      showShare,
      onShow,
      list,
      getdata,
      onHandle,
    }
  },
})
</script>

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注