vue3: extends missing parent's setup-CodePudding

parent.vue

<template>
    <input :type="computedType"/>
</template>
<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
    type: {
        required: false,
        type: String,
        default: 'text',
    },
});

const showPassword = ref(false);
const computedType = computed(() => {
    if (props.type === 'password') {
        return showPassword.value ? 'text' : 'password';
    }
    return props.type;
});
</script>
<script>
export default {
    data() {
        return {
             uuid: getRandomUuid(),
        }
    }
}
</script>

child.vue

<template>
    <input :type="computedType"/>
</template>
<script>
import Parent from '~/components/parent.vue'
export default {
    extends: Parent
}
</script>

In Vue3, I have a child.vue component which is inherited from parent.vue, I defined a computedType computed attribute in parent.vue, but it's missing in child.vue, however, uuid which is defined in parent.vue is accessible in child.vue.

[Vue warn]: Property "computedType" was accessed during render but is not defined on instance.

How to get computedType and any other attributes defined in <script setup> of parent.vue in child.vue?

Really appreciate any help provided!

update:

Only if I define all the attributes in <script>(but not in setup()) instead of <script setup>, they could be accessible

CodePudding user response：

There are a few specific instances where you can have more than one script tag, and they are all outlined here in the documentation. Still, besides those 3 specific use cases, you shouldn't use more than one script tag. Your case of a separate script tag for one data variable is not a valid use case.

I recommend writing the component entirely with the options API (the only API that supports the "extends" option), or writing entirely with the composition API where you would use composable functions to effectively extend your component

CodePudding user response：

defineExpose({computedType}); try this