4

The context argument is very useful to get things like props and the root instance(which is what I'm trying to get) of the app, and it's available when using the setup(props, { emit, root }) function.

But how do you do this with the SFC syntax?

So far these options have been deprecated or aren't found in the docs:

  1. <script setup="props, { emit, root }">
  2. Using getCurrentInstance which is an internal API now as explained Vue 3: Is getCurrentInstance() deprecated?

Which other options are there for getting the root instance?

2
  • 1
    The Vue 3 setup() context does not contain root. root was only added in @vue/composition-api's setup context, but that's deprecated. To get the root element of the component, you have to explicitly use a template ref. Commented Jul 12, 2022 at 23:55
  • 1
    Right. Although what I'm really interested in is getting the root instance of the app to access for instance globally installed packages which can be done from the template with the $ how can I do this from the <script setup> syntax? Do you know what I mean? Commented Jul 13, 2022 at 7:39

2 Answers 2

2

I looked solution in this way, so God is got me a good point, which I met here https://phphe.com/article/frontend/vue3-meta-simple-solution

So you could use composable object. Like this

//validation.ts

const hasError = refs(false);

function useValidation(value: any, vm: ComponentInternalInstance) {

  onMounted(() => { 
      /* ... do some stuff here for validation value */
     hasErrors.value = /* checkValue if it's valid /*
  }, vm)

 return {
  hasErrors
 }
}
export { 
  useValidation
}

then using it, like this:

// component.vue

import { useValidation } from './Validation.ts'

const text = ref('');
const vm = getCurrentInstance();
const { hasErrors } = useValidation(text, vm);

here onMounted has two parameters, first is a hook, and second is a instance of component that has context.

export declare const onMounted: (hook: () => any, target?: ComponentInternalInstance | null) => false | Function | undefined;

Also vue3 api docs has clarification about what is instance of the component:

https://dtinth.github.io/api-documenter-yaml-to-antora-asciidoc/vue3-apidocs-example/api/vue_runtime-core_ComponentInternalInstance_interface.html

And they said that

We expose a subset of properties on the internal instance as they are useful for advanced external libraries and tools.

Which you could get via method getCurrentInstance()

Sign up to request clarification or add additional context in comments.

Comments

1

When using <script setup>, you can access props with:

const props = defineProps({
  myProp: {
    type: String,
    required: true,
    default: "test"
  },
  // other props
});

console.log(props.myProp)

And emits with:

const emit = defineEmits(["myEmit", "anotherCustomEvent", "..."]);
const someData = "test";

emit("myEmit");
emit("myEmit", someData);

More from the official docs

3 Comments

This is fine, but what about the root instance?
Maybe related to this question? stackoverflow.com/questions/61600078/…
I think that's mostly about template refs and I'm mostly asking about getting the root instance of a component using the <script setup> syntax since we don't have access to this. Maybe this is not availed by design, I'm not sure but I'll keep checking if that's the case

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.