0

我只是尝试使用 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>
4

1 回答 1

1

问题出return closeDialog在组件的setup功能上ListFilter。如果你从 中返回一个函数setup()，Vue认为它是一个渲染函数。换一个试试return { closeDialog }...

于 2020-01-01T18:30:38.100 回答