How to inherit outer UI components in vue/nuxt?-CodePudding

I'm new to vue, my project uses vue, nuxt, and vuetify.

I would like to make a base .vue component, and several components derived from the base.

For example, this is my base dailog MyDialog.vue:

<template>
  <v-dialog v-model="isShowDialog" persistent>
    <v-card>
      <v-card-title> My Base Dialog </v-card-title>

      <!-- inherited UI logic goes here -->

      <v-card-actions>
        <v-btn @click="closeDialog"> Close </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      isShowDialog: true,
    }
  },
  methods: {
    closeDialog() {
      this.isShowDialog = false
    },
  }
}
</script>

For the derived components, I would like to make something like ImageDialog.vue, LoginFormDialog.vue, ComplexDialog.vue, each have it's own child UI and logic besides the base MyDialog.vue.

For example, could I achieve something like this:

<MyDialog>
    <div>
        <span>This is an image</span>
        <img src="...">
    </div>
</MyDialog>

Anywhere to I should start? Or any document I could reference?

CodePudding user response：

Yes , you can import component into another component. Please refer below reference: https://flaviocopes.com/vue-import-component/

CodePudding user response：

For basic components, you could use a simple nesting of each component inside of the other.

If you want more flexibility reusability, you can use slots: https://vuejs.org/guide/components/slots.html

Basic named slots are quite powerful, but scoped slots are even better. Meanwhile, be careful because it's a more advanced pattern.

Here is somebody well known in the Vue community, if you are looking for a bigger course on the subject: https://michaelnthiessen.com/#courses