When i use extends or mixin to reuse a base component,How can i access the base component's data(computed or watched)in the method "setup" of the child component.
Version
3.0.2
Steps to reproduce
base component
<script lang='ts'>
import { h, defineComponent, reactive, VNode, VNodeChild, computed } from "vue";
import { arrayValidator } from "../../../utils/validator";
const displayArray = [
"none",
"flex",
"inline-flex",
"block",
"inline",
"inline-block",
"table",
"table-row",
"table-cell",
];
export default defineComponent({
name: "SDBase",
props: {
display: {
type: String,
default: "top",
validator: arrayValidator("display", displayArray),
},
xs: [String, Object],
sm: [String, Object],
md: [String, Object],
lg: [String, Object],
xl: [String, Object],
},
computed: {
baseClassList: function (): Array<String> {
let classList = [];
...
return classList;
},
},
});
</script>
child component
export default defineComponent({
name: "SDContainer",
extends: SDBase
...
setup(props, context) {
// How can i access the base component's data(computed or watched)here.
},
What is expected?
I want to access the parent(base) component's (data, props, computed,watched,etc) in the method "setup" of the child component.
What is actually happening?
I do not know how to do it.