The similarities and differences between Vue3 and Vue2's Props and global components!

Author: Matt Maribojoc
Translator: Frontend Xiaozhi
Source: stackabuse

There are dreams and dry goods. WeChat search [Great Move to the World] attention to this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Vue3 Props

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

Why is it important to use Props?

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

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

props example

Before Vue3, the props component is only this object, and it can be accessed this.propName

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

setup method contains almost all options that were separated into different options in the past, such as data , computed , watch etc. about 1613ea9a328648 about the setup method is that there is no this .

So how do we use Vue3 props this

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

1. props-an object props that contains the component.
2. context-an object that contains specific attributes that can be found this

context official document only states that there are attrs , slots , and emit() .

Here is an example:

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

Do the project found that, in fact, context there is a exposed , this is used to expose setup method, is the parent component sub-assemblies to access the inside of the setup method. I encountered this requirement in the project, so I also went to the Issues on Vue github to find the answer, and found that some people asked:

Especially, it is clearly stated at the bottom that this is not recommended:

He suggested to pass in a Props to the child component through the parent component.

Why does Vue3 props work differently from Vue2?

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

A big goal of the Vue team when designing Vue3 was to make it more scalable in large projects. Part of it is to Options API to Composition API to achieve better code organization.

But by eliminating this and instead 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 Vue3 global components so that they can be accessed throughout our project. It is slightly different from the way we declare them in Vue2, but it is also very simple.

What is a global component

First of all, we must also understand what the Vue3 global component is and why we should use it.

Usually, when we want to include a component in a Vue instance, we will register it locally, usually like this:

<script>
import PopupWindow from '../components/PopupWindow.vue';

export default {
  components: {
    PopupWindow
  }
}
</script>

However, assuming there is a component, we know that it will be used multiple times in multiple files. So you need to write the above code once in each file-especially when we refactor the project or perform certain operations, it will be more troublesome.

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

How does global components work in Vue2

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

This method has two parameters:

1. The name of the global component
2. 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')

Now, this PopupWindow component can be used in all children of this Vue instance.

What about in Vue3

In Vue3, because the working method of creating Vue instances is slightly different (using createApp ), the code is slightly different, but it is equally simple to understand.

Rather than declaring global components from Vue2 objects, we must first create our application. Then, you can 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')

~End, I’m Shuwanzhi, I’m going to clean the dishes, the bones are white!

---

possible bugs after 1613ea9a328999 code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

original:

https://leavue.co/2020/08/an-introduction-to-vue3-props-a-beinners-guide/
https://leavue.co/2020/08/how-to-register-a-vue3-global-component/

comminicate

If you have dreams and dry goods, search for [Great Move to the World] attention to this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.