Vue 3 SFC <script setup> context argument

Question

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?

Answer 1

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()

Answer 2

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