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

This article mainly explains "what is the method of vuejs calling components". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of vuejs calling components".

Vuejs calls component methods: 1, through v-model or .sync explicit control component hidden; 2, through the js code call; 3, through the Vue instruction call.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

Three ways of calling Vue components

Recently, I encountered some problems when writing fj-service-system. That is, do some of my components, such as Dialog and Message, introduce a tripartite component library, such as element-ui, or implement one myself? Although they have on-demand features, the overall style doesn't match my entire system. So you can consider implementing these simple components manually.

Usually when we read some Vue articles, what we can see is usually about the Vue single file component development page. There are relatively few articles on single component development. When I was working on the fj-service-system project, I found that single component development is also very interesting. You can write it down. Because what is written is not a ui framework, so it is only a record, there is no github repository, just look at the code.

V-model or .sync explicitly controls the component to show hidden

Called by js code

Called by the Vue instruction

When writing components, many ways of writing and inspiration come from element-ui, thank you.

Dialog

I'm used to calling this thing a dialog box, and there's actually a name for a modal component. In fact, in the page, a small window pops up, and the content in this small window can be customized. It can usually be used as a dialog box for login function.

This component is well suited to explicitly control the appearance and disappearance of v-model or .sync. It can be written directly on the page and then controlled by data-the component that best fits the design idea of Vue.

For that, we can write a component called Dialog.vue.

{{title}} export default {name: 'dialog', props: {title: String, visible: {type: Boolean, default: false}}, methods: {close () {this.$emit (' update:visible') False) / / delivery shutdown event}, closeModal (e) {if (this.visible) {document.querySelector ('.shutdown') .delivery (e.target)?': this.close () / / determine that the click point is not in the dialog dialog box. If you are outside the dialog box, call the this.close () method to close the dialog box}

CSS and so on do not write, it has little to do with the component itself.

When we want to call externally, we can call as follows:

Import Dialog from 'Dialog' export default {components: {Dialog}, data () {return {visible: false}}, methods: {openDialog () {this.visible = true / / explicitly control dialog through data}

In order to turn Dialog on and off, you can try to add components to match the transition effect, a simple transition effect will also be very good.

Notice

This component is similar to element-ui 's message (message prompt). What attracts me most is that it is not called through v-model by explicitly writing the html structure of the component on the page, but by calling through methods such as this.$message () in js. Although this approach runs counter to Vue's idea of data-driven. But I have to say that it is really convenient in some cases.

For components like Notice, you only need to prompt a few words at a time and give the user a simple message prompt. The information of the hint may be changeable, or even superimposed. If you call it in the first way, you have to write the html structure in advance, which is undoubtedly troublesome, and you can't predict how many message boxes there are. If you call a method through js, you only need to consider the different text and types of the call in different situations.

The previous practice is to write a Vue file, and then introduce the page through the components attribute, explicitly write the tag to call. So how do you call a component through the method of js?

The key here is Vue's extend method.

The documentation does not specify how extend can be used in this way, but only as a component constructor of a Vue that requires manual mount.

By looking at the source code of element-ui, you can understand how to achieve the above functions.

The first step is still to create a Notice.vue file.

{{content}} export default {name: 'notice', data () {return {visible: false, content:', duration: 3000}}, methods: {setTimer () {setTimeout (() = > {this.close () / / 3000ms and then call the close method}, this.duration)} Close () {this.visible = false setTimeout (() = > {this.$destroy (true) this.$ el [XSS _ clean] .removeChild (this.$el) / / remove this component from DOM}, mounted () {this.setTimer () / / start timing when mounting Disappear after 3000ms}}

What is written above is not much different from an ordinary single-file Vue component. But the difference is that there is no props, so how do you control the visibility of this component externally?

So you also need a js file to take over the component and call the extend method. You can create an index.js file in the same directory.

In this file we can see that through NoticeConstructor we can control the various properties of a component through js. Finally, we register it on Vue's prototype so that we can use a method like this.$notice () inside the page, which makes it easy to call this component to write a simple notification prompt.

Of course, don't forget that this is equivalent to a plug-in for Vue, so you need to call the Vue.use () method in the main js:

/ / main.js//... import Notice from 'notice/index.js'Vue.use (Notice) / /... Loading

While looking at element-ui, I also found an interesting component, Loading, which is used to put a layer of loading style on some components that need to load data and wait. The most convenient way to call this loading is to control the display and concealment of the Loading layer through the assigned true/false through the instruction v-loading. Of course, such a calling method is also very convenient. And you can choose the entire page Loading or a component Loading. This kind of development experience is naturally very good.

In fact, it is similar to Notice's way of thinking, but because it involves directive, it will be relatively complicated in logic.

Usually, if you do not involve the development of Vue's directive, you may not be exposed to concepts such as modifiers, binding, and so on. Reference documentation

To put it simply, something like: v-loading loading. Fullscreen = "true", v-loading is directive,fullscreen, and its modifier,true is the value of binding. So, it is through such a simple sentence to achieve the full-screen loading effect, and when there is no fullscreen modifier, it is the loading effect on the element that owns the instruction. The component controls the opening and closing of binding through the value value of loading. (similar to the effect of v-model)

In fact, loading is also an actual DOM node, but it is not particularly easy to turn it into a convenient instruction.

First we need to write the Vue component of loading. Create a new Loading.vue file

. {{text}} export default {name: 'loading', data () {return {visible: true, fullscreen: true, text: null}}, methods: {handleAfterLeave () {this.$emit (' after-leave');}}. Loading-mask {position: absolute / / in non-full-screen mode, position is absolute z-index: 10000; background-color: rgba (255 position 235, 215, .8); margin: 0; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .3s;}. Loading-mask.fullscreen {position: fixed; / / full-screen mode, position is fixed} / /.

The key to Loading is to achieve two effects:

1. Full-screen loading can be achieved by inserting under body, then changing the position of Loading to fixed, and then inserting it into body.

two。 To loading the element, you need to modify the position of the current element: if it is not absolute, change it to relatvie and insert it under the current element. At this point, the position of the Loading is absolutely positioned relative to the current element.

So create an index.js file in the current directory to declare the logic of our directive.

Import Vue from 'vue'const LoadingConstructor = Vue.extend (require ('. / Loading.vue')) export default {install: Vue = > {Vue.directive (key bind of 'loading', {/ / instruction: (el, binding) = > {const loading = new LoadingConstructor ({/ / instantiate a loading el: document.createElement (' div'), data: {text: el.getAttribute ('loading-text')) / / obtain the text of loading through the loading-text attribute fullscreen:!! binding.modifiers.fullscreen}}) el.instance = loading / / el.instance is a Vue instance. The DOM element of el.loading = loading.$el; / / el.loading is loading.$el el.loadingStyle = {}; toggleLoading (el, binding) }, update: (el, binding) = > {el.instance.setText (el.getAttribute ('loading-text')) if (binding.oldValue! = = binding.value) {toggleLoading (el, binding)}}, unbind: (el Binding) = > {/ / unbind if (el.domInserted) {if (binding.modifiers.fullscreen) {document.body.removeChild (el.loading) } else {el.loading & & el.loading [XSS _ clean] & & el.loading [XSS _ clean] .removeChild (el.loading) }}) const toggleLoading = (el, binding) = > {/ / used to control the appearance and disappearance of Loading (binding.value) {Vue.nextTick () = > {if (binding.modifiers.fullscreen) {/ / if it is full-screen el.originalPosition = document.body.style.position; el.originalOverflow = document.body.style.overflow InsertDom (document.body, el, binding); / / insert dom} else {el.originalPosition = el.style.position; insertDom (el, el, binding) / / if not full screen, insert the element itself} else {if (el.domVisible) {el.instance.$on ('after-leave', () = > {el.domVisible = false; if (binding.modifiers.fullscreen & & el.originalOverflow! = =' hidden') {document.body.style.overflow = el.originalOverflow) } if (binding.modifiers.fullscreen) {document.body.style.position = el.originalPosition;} else {el.style.position = el.originalPosition;}}); el.instance.visible = false } const insertDom = (parent, el, binding) = > {/ / insert logical if (! el.domVisible) {Object.keys (el.loadingStyle) .forEach of dom (property = > {el.loading.style [property] = el.loadingStyle [property];}) If (el.originalPosition! = = 'absolute') {parent.style.position =' relative'} if (binding.modifiers.fullscreen) {parent.style.overflow = 'hidden'} el.domVisible = true Parent.appendChild (el.loading) / / inserts el.loading instead of el itself Vue.nextTick (() = > {el.instance.visible = true;}); el.domInserted = true;}

Similarly, after writing the entire logic, we need to register it under Vue in the project:

/ / main.js//... import Loading from 'loading/index.js'Vue.use (Loading) / /.

So far, we have been able to use something like

This is the way to call a loading component.

Thank you for reading, the above is the content of "what is the method of vuejs calling components". After the study of this article, I believe you have a deeper understanding of what the method of calling components of vuejs is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.