These 10 tips will make you a better Vue developer

Introduction

---

#I prefer to use Vue to develop, so sometimes I will delve into its functions and features. In this article, I introduce you to ten cool tips and tricks to help you become a better Vue developer.

Slot syntax is more beautiful

---

With the launch of Vue 2.6, the abbreviation of slots has been introduced. Previously the abbreviation could be used for events (for example, @click means v-on:click event) or colon means for binding (:src). For example, if you have a table component, you can use this function as follows:

$on('hook:')

---

You can use this feature if you want to define a custom event listener or third-party plug-in in the created or mounted method and need to delete it in the beforeDestroy method to avoid causing any memory leaks. Using the $on(‘hook:’) method, we can define/remove events using only one lifecycle method (instead of two).

#prop validation

---

You probably already know that props can be validated as primitive types such as strings, numbers or even object. We can also use a custom validator, for example if we want to validate against a list of strings:

Dynamic Directive Parameters

---

One of the coolest features of Vue 2.6 is the ability to dynamically pass directive parameters to components. Suppose you have a button component, and in some cases you want to listen to click events, and in other cases you want to listen to double-click events. This is where dynamic directives come in handy

Reusing components of the same route

---

Sometimes, we route differently When sharing something, if you switch between these routes, the shared component will not re-render by default because Vue reuses the component for performance reasons. However, if we still wish to re-render these components, we can achieve re-rendering by providing the :key attribute in the router view component.

All props from parent class to child class

---

This is a very cool feature that combines all Props are passed from parent component to child component. This is especially convenient if we have a wrapper component for another component. Because, we don’t have to pass props to child components one by one, but pass all props at once:

The above can replace the following

All event listeners from parent class to child class

---

If the child component is not in the root directory of the parent component, all events can be Listeners are passed from parent component to child component like this:

#If the child component is at the root of its parent component then by default it will get those component, so this little trick is not needed.

$createElement

---

By default, every Vue instance has access to the $createElement method to create and return virtual nodes. For example, this can be leveraged to use tags in methods that can be passed via the v-html directive. In a function component, this method can be accessed as the first parameter in the render function.

Using JSX

---

Since Vue CLI 3 supports using JSX by default, now (if we want) we can write code using JSX (for example, we can conveniently Writing functional components). If you are not using Vue CLI 3 yet, you can use babel-plugin-transform-vue-jsx to get JSX support.

Custom v-model

---

By default, v-model is syntactic sugar on @input event listeners and :value props. However, we can specify a model property in the Vue component to define what events and values are used

Summary

---

I hope these tips and tricks are helpful to you. If you also know any tips, please leave a message.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of These 10 tips will make you a better Vue developer. For more information, please follow other related articles on the PHP Chinese website!