Question

我只是尝试使用Vuetify在Nuxt / Composition API / TypeScript项目中使用子组件。我曾尝试在setup方法之前包括组件，但是当我查看源代码时，我只会看到子组件数据应该在哪里。

这是应该显示“嵌套”组件的 layouts / default.vue 布局。

<template>
  <v-app>
    <v-app-bar clipped-left app color="indigo darken-2" />
    <v-content>
      <nuxt />
    </v-content>
    <v-bottom-navigation
      v-model="bottomNav"
      color="indigo darken-2"
      absolute
      class="hidden-sm-and-up"
    >
      <v-btn
        value="search"
        @click="dialog=true"
      >
        <span>Search</span>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-bottom-navigation>
    <v-dialog v-model="dialog">
      <ListFilter
        @closeDialog="closeDialog"
      />
    </v-dialog>
  </v-app>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api'
import ListFilter from '~/components/ListFilter.vue'
export default createComponent({
  components: { ListFilter },
  setup() {
    const bottomNav = ref<string>()
    const dialog = ref<boolean>(false)
    const closeDialog = () => {
      dialog.value = false
      bottomNav.value = ''
    }
    return {
      bottomNav,
      dialog,
      closeDialog
    }
  }
})
</script>

这是要嵌套的 components / ListFilter.vue 组件的示例内容，其内容无关紧要。

<template>
  <v-card>
    <v-card-title>
      Search
    </v-card-title>
    <v-card-text>
      Test Text
    </v-card-text>
    <v-card-actions>
      <v-btn
        @click="closeDialog"
      >
        Close
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'
export default createComponent({
  setup(_, { emit }) {
    const closeDialog = () => {
      emit('closeDialog')
    }
    return closeDialog
  }
})
</script>

Answer 1

问题是return closeDialog组件的setup函数中的ListFilter。如果从setup()返回一个函数，则Vue expects it is a render function。尝试改用return { closeDialog } ...

Vue Composition API createComponent子组件

1 个答案: