Vue3 and Vue2 Props, global components similarities and differences!

By Matt Maribojoc

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

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 components are accessed is different from Vue2.

Why is it important to use Props?

First, we need to know what props are. Props is a custom property that can be registered on a component and is one of the ways that we can pass data from a parent component to its children.

Because props allows us to share data between components, it allows us to break the Vue project into more modular components.

Props sample

Prior to Vue3, the props of a component were only part of this object and could be accessed using this.propName.

One big change to Vue3, however, is the introduction of a setup method.

The setup method contains almost all the options that used to be separated into different ones, such as Data, computed, watch, and so on. The important thing to note about the setup method is that it doesn’t have this in it.

So how do we use Vue3 props without using this?

The setup method actually takes two parameters:

Props – Contains componentspropsThe object.
Context – an object that contains thethisA specific property that can be found on.

The context documentation only says attrs, slots, and emit().

Here’s an example:

setup (props, context) {
    console.log(props.propName) // access a prop to our component
}
Copy the code

It turns out that context also has an exposed context, which is used to expose methods in setup, that the parent component can access methods in setup in the child component. I met this requirement in the project, so I also went to Vue Github Issues to find the answer, and found that there was also a question:

Utah, at the bottom, explicitly states that this is not recommended:

He recommends that the parent component pass in a Props for the child component.

Why does Vue3 props work differently from Vue2?

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

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

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

How do I register Vue3 global components

Now let’s look at how to register Vue3 global components for easy access throughout our project. A little different from the way we declared them in Vue2, but very simple.

What is a global component

First, let’s also look at what the Vue3 global component is and why you want to use it.

Typically, when we want to include a component in a Vue instance, we register it locally, typically using:

<script> import PopupWindow from '.. /components/PopupWindow.vue'; export default { components: { PopupWindow } } </script>Copy the code

But let’s say we have a component that we know will be used multiple times in multiple files. So having to write the above code for every file – especially if we’re refactoring the project or doing something – can be a bit of a hassle.

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

How do 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 takes two arguments:

The name of the global component
Our component itself

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')
Copy the code

The PopupWindow component can now be used in all children of the Vue instance.

What about in Vue3

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

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')Copy the code

~ finish, I am brush bowl wisdom, I want to brush bowl, bone of white!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

The original:

Leavue. Co / 2020/08 / the an -… Leavue. Co / 2020/08 / how…

communication