Subscribe on changes!

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.

avatar
Oct 29th 2020

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.

avatar
Oct 29th 2020

You should do that in other options API because setup() is called before other component options are resolved.