This article was published by CAI Shuxiong

Next, we’ll take a closer look at how to complete the development process of making multiple components into a reusable component.

Now let’s look at our requirements

List component quilist.vue

In this section, we mainly want to complete such a list function, each line of the list is a component, there may be button component or arrow component in the list, click the button component can customize the event, at the same time, according to different parameters to determine the current list is the list with a button or arrow list.

First look at Quilist.vue

//quiList.vue <template> <div class="qui-list"> <span class="list-tips">{{tipsText}}</span> <qui-btn v-on:btnClickEvent="btnClickEvent" :msg=msg class="small"></qui-btn> </div> </template> <script> import quiButton from '.. / components/quiButton. Vue 'export default {props: {MSG: {default:' download '}, tipsText: {default: }}, components: {'qui-btn': quiButton}, methods:{btnClickEvent:function(){alert(' button click ')}} </script>Copy the code

This is basically what we have learned before, but remember that quiList itself is a component, and within this component we have introduced the button component quiButton, which is a reference component within a component, which is essentially a nesting of components. Note this: MSG = MSG, where the colon means that the MSG variable is bound, and this property is exposed via props (MSG itself is exposed in the button for the list component to use).

As for the click event, this is also a binding of the events we studied earlier. Now we have a new question. Is there a parameter that determines which button component to place to the right of the list component? Arrow component again.

Dynamic components

Vue provides some specific keywords: is and a specific structure

to generate dynamic components. Let’s change the script first:

<script> import quiButton from '.. /components/quiButton.vue' import quiArrow from '.. /components/ quiarrow. vue' export default{props:{MSG :{default: 'download'}, tipsText: {default: }, currentView:{default: 'qui-btn'}, Components :{'qui-btn': quiButton, 'qui-arrow': quiArrow}, methods: { clickEvent: function () { } } } </script>Copy the code

Add a custom tag ‘qui-arrow’ to components. Notice that we have added a custom property currentView. The default value is qui-btn.

<template>
  <div class="qui-list">
    <span class="list-tips">{{tipsText}}</span>
    <component :is="currentView" v-on:btnClickEvent="clickEvent" :msg=msg class="small"  keep-alive></component>
  </div>
</template>
Copy the code

We’ve removed the Qui-BTN tag and replaced it with a Component tag, which comes with Vue and can be used as a container for buttons as well as arrows. The key code to determine which component is in this container is: is=”currentView”, which is the button component when currentView is qui-bTN, and the arrow component when qui-arrow. The default value we just defined for this variable is qui-btn.

The keep-alive keyword keeps the component resident in memory. Since dynamic components may need to be switched dynamically, keeping the component active reduces memory consumption when the component changes.

As you can see, our Component still has button click events and MSG messages. These don’t matter, as long as the arrow component doesn’t have the same variable.

<qui-list tipsText="Custom copy, default right button." msg="Layer"></qui-list> <qui-list V-on :btnClickEvent="test"></qui-list> <qui-list ref="child1" tipsText=" currentView="qui-arrow"></qui-list>Copy the code

When using the list component, you simply assign a value to the exposed currentView to determine whether the right side is a button or an arrow. Note that the last qui-list has a ref attribute, which represents a collection of components. When there are many components on the page, there are several ways to get information about a component:

console.log(this.$children[0].msg);// Get from array
console.log(this.$refs.child1.msg);// From the collection of objects
Copy the code

For dynamic components, you don’t have to: In Vue, there is a directive called V-if/V-else/V-else -if, together with the display directive V-show, which determines whether or not the corresponding component should be displayed according to the specified value. In addition, I will not show this as a job. Interested or suggest actual combat, after all, we are only teaching you to learn, or hope you can expand their own learning.

The life cycle

A brief description of the lifecycle of a component is given here. Refs is used to retrieve information about a component object. When and at what point does this happen?

<script> export default { components: { 'qui-list': quiList }, BeforeCreate :function(){},// Created :function(){},// Components are instantiated beforeMount:function(){},// Components are written to the DOM structure before Mounted :function(){// Add console.log(this.$children); // Add console.log(this. console.log(this.$refs); }, BeforeUpdate :function(){},// Component updates :function(){},// Component updates such as modified copy beforeDestroy:function(){},// Component before destruction Destroyed :function(){} </script>Copy the code

To use the refs content, the component needs to write to the DOM before calling it.

What else do I need to learn

So far, we have learned most of the components and routing knowledge in the three articles. Of course, this is not the whole Vue, but compared with other knowledge points, these can be a stepping stone, understand these, for the application of other apis, a great help. Here are a few others that you can check out on the official website. They are not too difficult. With a little project demo, you will find that Vue is no more than that.

The transition

The transition is actually a CSS3 animation, and all of this, just writing CSS3 becomes like writing JS, which is a little bit like greenSock’s idea.

instruction

So far we’ve looked at common directives like V-ON, V-bind, and V-for, as well as a few common directives like the judge and V-show directives mentioned earlier, and the V-model directives (for input and other form components). It’s not that hard to learn when you know what the instructions do.

Render

Rendering is something I think we should learn by heart. It makes it easier to write better object-oriented components, and the cost of learning it is that the interface is closer to using native JS code. If necessary, a follow-up article on Render can also be written.

conclusion

The three series of articles come to an end here, some children boots may still feel that they have not learned Vue, sorry, maybe my title is too exaggerated, maybe because my example is not clear enough, the writing is not easy to understand. But it doesn’t matter, review our learning process, you can according to the learning process of this knowledge point, to find more articles, after all, “read 300 Tang poems, can not make poetry will sing”. Of course, during the learning process, we should practice and try more by ourselves. As to shallow after entering is shallow go out or deep go out, still want to rely on everybody oneself to define!

All relevant codes and official document addresses are attached at the end of this article

cn.vuejs.org/v2/guide/

This article has been authorized by the author to Tencent Cloud + community, more original text pleaseClick on the

Search concern public number “cloud plus community”, the first time to obtain technical dry goods, after concern reply 1024 send you a technical course gift package!