导入组合api

Question

假设我有index.ts

import { defineComponent, onMounted } from '@nuxtjs/composition-api'


const Todo = defineComponent({
  setup() {

    onMounted(() => {
      test()
    })

    function test(){

      return 'test'
    }
  },
  // You need to define an empty head to activate this functionality
  head: {},
})

export default Todo

我有Todo.vue

 <template>
    <p>
      Hello world!
    </p>
</template>

<script lang="ts">
import Todo from './index'
export default Todo
</script>

然后将其导入到其他文件中使用

<template>
  <Todo/>
</template>


<script lang="ts">
import { defineComponent} from '@nuxtjs/composition-api'

import Todo from '../../components/pages/Todo/'

export default defineComponent({
  components: {Todo},
  setup(){}
})

</script>

我收到一条错误消息，提示 render function or template not defined in component: Todo

知道我可以从哪里开始解决这个问题吗？

Answer 1

试试看：

<template>
  <h1 class="test">
    Hello world!
  </h1>
</template>

<script lang="ts" src="./index.ts">

</script>