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

This article mainly introduces vue how to customize the encapsulation of API components, the article introduces in great detail, has a certain reference value, interested friends must read it!

Custom encapsulated API component 1. Create vue component {{item.content}} / / multiple prompt boxes named let seed = 0; function getUuid () {return 'alert_' + (seed++) } export default {data () {return {notices: [] / / multiple prompt boxes saved to array}}, methods: {add (notice) {const name = getUuid () / / get the current prompt box name / / Object.assign shallow copy does not skip those source objects with values of [null] or [undefined] / / Object.assign (target,.. sources); target: destination object, sources: source object let _ notice = Object.assign ({name: name}, notice) / / Save the current prompt box label to notices this.notices.push (_ notice); / / remove it regularly, in seconds const time= notice.time | | 1.5; / 1.5 seconds later, call the removal method setTimeout (() = > {this.remove (name)). }, time* 1000);}, remove (name) {const notices = this.notices; for (let I = 0; I)

< notices.length; i++) { if (notices[i].name === name) { this.notices.splice(i, 1); break; } } } } }2.创建Alter.js生成组件import Vue from 'vue'import Alter from '/components/Alter/Alter.vue'//Alter添加新属性，newInstance是个函数需求参数为propertiesAlter.newInstance=properties=>

{const props=properties | | {}; / create a Vue component object const Instance=new Vue ({data:props, render (h) {return h (Alter, {props:props})}}); / / instantiate the component while waiting for the API call to avoid directly mounting the component to the body when entering the page () / / instantiate a component and then mount it to the body document.body.appendChild (component.$el); / / maintain the reference const alter=Instance.$children of the alter component through the closure [0]; return {/ / two methods exposed by the Alter component add (noticeProps) {alter.add (noticeProps);}, remove (name) {alter.remove (name) } / / prompt singleton let messageInstance;function getMessageInstance () {messageInstance=messageInstance | | Alter.newInstance (); return messageInstance;} / define function implementation function notice ({time='',content=''}) {let instance=getMessageInstance (); instance.add ({time:1.5, content:''})} / / publish method export default {info (options) {return notice (options);}} 3. Import Vueimport alert from'. / alert.js'// to mount on the Vue prototype Vue.prototype.$Alert = alert// and then use this.$Alert.info ({time: 1.5, content: 'hint'}) in the component to encapsulate the vue component called in api form

In actual development, there are generally two ways to encapsulate vue components: one is the commonly used method of passing values to child components through the props parent component:

Sub-component

Parent component

Another way is to call api. The following example is a pop-up window component of a custom icon encapsulated by me in the actual project.

First implement the UI page of the component (partial screenshot of css is incomplete)

Create a new alertTips.js file in the same directory as the vue file

Call the method in the page:

The above is all the contents of the article "how to customize and encapsulate API components in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.