Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you what are the similarities and differences between the Props global components of Vue3 and Vue2. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Vue3 Props

Props is an important part of any modern JS framework. The ability to transfer data between components is an essential element of a Vue project. In Vue3, the way you access Props in a component is different from Vue2.

Why is it important to use Props?

First of all, we need to understand what props is. Props is a custom property that can be registered on a component that allows us to pass data from the parent component to its child components.

Because props allows us to share data among components, it allows us to break down Vue projects into more modular components.

Props example

Before Vue3, the props of the component was only part of the this object and could be accessed using this.propName.

However, a big change in Vue3 is the introduction of the setup method.

The setup method contains almost all options that have been separated into different options in the past, such as data,computed,watch, and so on. The important thing to note about the setup method is that there is no this in it.

So how can we use Vue3 props without using this?

In fact, it's super simple. The setup method actually has two parameters:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Props-the object that contains the props of the component.

Context-an object that contains specific properties that can be found on the this.

Only attrs, slots, and emit () are stated in the official context documentation.

Here's an example:

Setup (props, context) {console.log (props.propName) / / access a prop to our component}

In doing the project, we found that context actually has an exposed, which is used to expose the methods in setup, that is, the parent component can access the methods in the setup in the child components. This has encountered this requirement in the project, so I also went to the Issues on Vue github to find the answer, and found that there were also questions:

Yoda made it clear at the bottom that this is not recommended:

He suggests that a Props is passed into the child component through the parent component.

Why does Vue3 props work differently from Vue2?

One of the main reasons for changing the way Vue3 Props is changed is to make the meaning of this in components / methods clearer. Sometimes when looking at Vue2 code, what this means can be ambiguous.

One of the big goals of the Vue team when designing Vue3 is to make it more scalable in large projects. Part of this is to redesign Options API as Composition API for better code organization.

But by removing most references to this and using explicit context and props variables, you can improve the readability of large Vue projects.

How to register Vue3 global components

Now, let's take a look at how to register the Vue3 global component for easy access throughout our project. It's slightly different from the way we declare them in Vue2, but it's also very simple.

What is a global component

First, we also need to understand what the Vue3 global component is and why we use it.

Typically, when we want to include a component in an Vue instance, we register it locally, which is typically used as follows:

Import PopupWindow from'.. / components/PopupWindow.vue'; export default {components: {PopupWindow}}

However, suppose there is a component that we know will be used multiple times in multiple files. So it can be troublesome to write the above code once for each file-especially if we ReFactor the project or do something.

In this case, it is useful to register the component globally so that it can be accessed in all subcomponents of the primary root Vue instance. In other words, registering a component globally means that we don't have to import it in every file.

How global components work in Vue2

In Vue2, no matter where we create the Vue instance, we only need to call the Vue.component method to register the global component.

This method has two parameters:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Name of the global component

Our components themselves

Import Vue from 'vue' import PopupWindow from'. / components/PopupWindow' import App from'. / App.vue' Vue.component ('PopupWindow', PopupWindow) / / global registration-can be used anywhere new Vue ({render: h = > h (App)}). $mount (' # app')

This PopupWindow component can now be used in all children of this Vue instance.

What about in Vue3?

In Vue3, because creating an Vue instance works slightly differently (using createApp), the code is slightly different, but it is equally simple to understand.

Instead of declaring global components from a Vue2 object, we must first create our application. You can then run the same .component method as before.

Import {createApp} from 'vue' import PopupWindow from'. / components/PopupWindow' import App from ". / App.vue" const app = createApp (App) app.component ('PopupWindow', PopupWindow) / / global registration-can be used anywhere app.mount (' # app') these are the similarities and differences between the Props global components of Vue3 and Vue2 shared by Xiaobian. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.