The method of abstracting props components in vue3

This article mainly explains "the method of extracting props components in vue3". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of extracting props components in vue3".

Props components are extracted from the scene

Now suppose you need to abstract a mobile top Header component, first think about what a top component normally does: name, return, return home page, and more.

If a page does not need to use the function of returning to the home page, you can use it without passing parameters.

After setting up the props, you can print the props in the setup to see the passed parameters that are successfully bound.

Export default {props: {type: String, default:''}, back: {type: String, default:''}, home: {type: Boolean, default: false}, more: {type: Boolean, default: false}

After processing props passing parameters, we can consider the context part. For example, if an event is triggered after clicking the fallback tag, a callback function will be bound in the caller's parent component and executed after the child component emit.

So declare the name of the function that will emit at the same level as props.

The code for the template section and the script section is posted here.

{{name}} import {ref} from 'vue'import {useRouter} from' vue-router'export default {props: {name: {type: String, default:''}, back: {type: String, default:''}, home: {type: Boolean, default: false}, more: {type: Boolean, default: false}} Emits: ['callback'], setup (props, context) {const home = ref (props.home) const more = ref (props.more) const router = useRouter () const goBack = () = > {if (! props.back) {router.go (- 1)} else {router.push ({path: props.back})} context.emit (' callback')} return {goBack Home}

In fact, the correct way should be to code in multiple pages and then extract the component.

However, this is only a demonstration, so it clears out in advance what needs to be extracted.

Then post the code in some of the caller components.

In this way, we successfully extracted a simple component and displayed it differently through the value passed by the parent component.

Of course, detaching components can be advanced, such as using slot slots, using the same usage as before.

Hello Black Cat! The Writing method of component template extraction

Method 1: detach the template using the JavaScript tag

Method 2: detach the template using the template tag

Thank you for your reading, the above is the content of "props component extraction method in vue3". After the study of this article, I believe you have a deeper understanding of the method of props component extraction in vue3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!