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

Editor to share with you what vue component-based development means. I hope you will get something after reading this article. Let's discuss it together.

In vue, component-based development refers to splitting a complex business into multiple components, each of which depends on CSS, JS, templates, pictures and other resources for development and maintenance. Because the components are resource-independent, the components can be reused within the system, and the amount of code can be greatly simplified, and it is more friendly to later requirement changes and maintenance.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue component-based development

What is componentization?

Vue.js has two magic weapons, one is data-driven, the other is componentization, so the question is, what is componentization and why componentization? Then I will answer these two questions one by one, the so-called componentization is to split the page into multiple components, each component depends on CSS, JS, templates, pictures and other resources together for development and maintenance. Because components are resource-independent, components can be reused within the system and can be nested between components. If the project is more complex, it can greatly simplify the amount of code, and is more friendly to later requirements change and maintenance.

1. Component-based development refers to splitting a complex business into one component after another.

2. the components of component-based development should be flexible in general.

3. Component-based development involves the encapsulation of js components of Vue, and it is necessary to master the basic knowledge of Vue, Vue instance methods and properties, Vue.extend, Vue plug-ins and so on.

How to develop based on component

Take a look at the following picture first:

This is an error in vue.js due to the use of an unregistered component, lx-xxx, which tells us that you must register before using a custom component.

So how do you register a component? Vue.js provides two ways to register components, global registration and local registration.

1. Global registration

In vue.js, we can use Vue.component (tagName, options) for global registration, for example

Vue.component ('my-component', {/ / option}) 2. Local registration

Vue.js also supports partial registration. We can use the components option to do local registration of components within a component, for example:

Import HelloWorld from'. / components/HelloWorld'export default {components: {HelloWorld}}

Difference: global components are mounted under Vue.options.components, while local components are mounted under vm.$options.components, which is the reason why globally registered components can be used arbitrarily.

Necessary knowledge of component-based development

As the saying goes, if you want to do good work, you must first sharpen its tools. Before we formally develop a component, we must first master some necessary knowledge. Here I will only briefly introduce it. Please refer to the official website for details.

Name

Name of the assembly, required

Name: 'lxNiu'

Hump commands are used in js, and HTML is named using kebab-case.

Props

Component properties for parent-child component communication, accessible through this.msg

{{msg}} props: {msg: {type: String, default:''}} show: Boolean / / default falsemsg: [String, Boolean] / / multiple types

Computed

Process the property in data or props and return a new property

{{newMsg}} computed: {newMsg () {return 'hello' + this.msg}}

Note: because both props,data and computed are merged as attributes of vm at compile time, the name cannot be repeated.

Render

Describe template with render function

Hello world export default {name: 'lxNiu', props: {tag: {type: String, default:' div'},}, / / h: createElement render (h) {return h (this.tag, {class: 'demo'}, this.$slots.default)}}

The h in render is actually createElement. It takes three parameters and returns a vnode.

H parameter explanation:

Args1: {string | Function | Object} is used to provide the html content of DOM

Args2: {Object} set DOM styles, properties, binding events, etc.

Args3: {array} is used to set the content of distribution

Note: vue compilation order: template- > compile-- > render-- > vnode-- > patch-- > DOM

Slot

Header footer button export default {name: 'lxNiu', mounted () {this.$slots.header / / contains the contents of slot= "foo" this.$slots.default / / get a vnode that is not included in a named slot, here is button}}

Class

Define the class name of a subcomponent

/ / parent component / / Child component Control / / Real DOMhello

Style

Pass styles to child components

/ / parent component / / Child component hello world export default {name: 'lxNiu', props: {bodyStyle: {},},}

Other attributes

$attrs

Vmurbind = "$attrs" adds attributes other than class and style to the parent component, such as defining input:

V-once

Component will only be rendered once, and then it will not be re-rendered even if the data changes. For example, in the example, val will not become 456.

Button button {{val}} export default {data () {return {show: false, val: '123'}},}

Mixins

/ / mixin.jsexport default {data () {return {msg: 'hello world'}}, methods: {clickBtn () {console.log (this.msg)}},} / / index.vuebuttonimport actionMixin from ". / mixin.js"; export default {methods: {}, mixins: [actionMixin]} instance demonstration

For example, if we want to register a component like lx-button, the directory and pseudo code are as follows:

Index.vue

LxButtonexport default {name: 'lxButton'}

Index.js

Import lxButton from'. / src/index'lxButton.install = (Vue) = > {Vue.component (lxButton.name, lxButton)} export default lxButton

Where install is an exposed method provided by Vue.js, the first parameter of this method is the Vue constructor, and the second parameter is an optional option object.

MyPlugin.install = function (Vue, options) {}

Reference: developing plug-ins

Https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

Realization principle of watch- pop-up window

Display export default {data () {return {dialogVisible: false}}, watch: {dialogVisible (val) {console.log ('father change', val)}

Define component

Close export default {name: 'lxNiu', props: {visible: Boolean}, watch: {visible (val) {console.log (' child change:', val)}}, methods: {hide () {this.$emit ('update:visible', false);},},}

Click the display button in the parent component, change the value passed into the child component, click close in the child component, and change the median value of the parent component.

Note: @ click= "dialogVisible = true" changes the value of dialogVisible to true when clicked

Note: visible.sync: bidirectional data binding, used with update:visible, to implement child components to modify values in parent components

The official website explains: sync

Col component instance

Export default {name: 'ElCol', props: {span: {type: Number, default: 24}, tag: {type: String, default:' div'}, offset: Number, pull: Number, push: Number, xs: [Number, Object], sm: [Number, Object], md: [Number, Object], lg: [Number, Object] Xl: [Number, Object]}, computed: {gutter () {let parent = this.$parent While (parent & & parent.$options.componentName! = = 'ElRow') {parent = parent.$parent;} return parent? Parent.gutter: 0;}}, render (h) {let classList = []; let style = {}; if (this.gutter) {style.paddingLeft = this.gutter / 2 + 'px'; style.paddingRight = style.paddingLeft } ['span',' offset', 'pull',' push'] .forEach (prop = > {if (this [prop] | | this [prop] = 0) {classList.push (prop! = = 'span'? `el-col-$ {prop}-${this [prop]} `: `el-col-$ {this [prop]}`);}}) ['xs',' sm', 'md',' lg', 'xl'] .forEach (size = > {if (typeof this [size] =' number') {classList.push (`el-col-$ {size}-${this [size]} `);} else if (typeof this [size] = 'object') {let props = this [size] Object.keys (props) .forEach (prop = > {classList.push (prop! = = 'span'? `el-col-$ {size}-${prop}-${props [prop]} `: `el-col-$ {size}-${props [prop]}`);}) Return h (this.tag, {class: ['el-col', classList], style}, this.$slots.default);}}

Col components use render functions instead of template to implement components for two reasons:

This component has a large number of class judgments. If the template code is more redundant, the js code is more concise.

Direct render description has better performance.

The official website explains: render-function

Button component instance

Export default {name: 'ElButton', inject: {elForm: {default:'}, elFormItem: {default:'}}, props: {type: {type: String, default: 'default'}, size: String, icon: {type: String Default:''}, nativeType: {type: String, default: 'button'}, loading: Boolean, disabled: Boolean, plain: Boolean, autofocus: Boolean, round: Boolean, circle: Boolean}, computed: {_ elFormItemSize () {return (this.elFormItem | | {}). ElFormItemSize }, buttonSize () {return this.size | | this._elFormItemSize | (this.$ELEMENT | | {}) .size;}, buttonDisabled () {return this.disabled | (this.elForm | | {}) .size;}}, methods: {handleClick (evt) {this.$emit ('click', evt);}

Local component instance

Import loginHeader from'. / login-header';import loginRequest from'. / login-request';import loginFooter from'. / login-footer';export default {components: {[loginHeader.name]: loginHeader, [loginRequest.name]: loginRequest, [loginFooter.name]: loginFooter}} After reading this article, I believe you have a certain understanding of "what does vue component development mean?" if you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

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.