Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "vue encapsulation component js instance analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue encapsulation component js instance analysis" article can help you solve your doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

What is componentization:

Componentization is to divide a page into small functional modules, and each functional module completes its own independent functions, which makes the management and maintenance of the whole page very easy.

Vue component thought

Componentization is an important idea in Vue. When we have a certain basic knowledge of vue, we will begin to encapsulate components.

It provides an abstraction that allows us to develop independent reusable widgets to construct our applications. Component tree.

Application of the idea of componentization

1. Make full use of the idea of component in the project

two。 Split the page into small reusable components as much as possible

3. Benefits: the code is easier to organize and manage, and more scalable

one。 Basic steps for registering components

Let's use an input box component that encapsulates an Element Ui as an example to implement the full text.

The use of components is divided into three steps

1. Create a component constructor c-input

Template template for the component

Note: there can be only one root element, otherwise the warning reports an error

1 template can be a literal string, but the disadvantage is that it is not highlighted and is built into JavaScript, which is troublesome to write.

2 template can be written in the script tag, although it solves the problem of highlighting, but it is also troublesome

3 none of the above methods are good, our final solution is to use the .vue single file component of Vue to write. (webpack)

But to use this approach, you have to combine some build tools.

two。 Register component

Registration components are divided into local registration and global registration, which will be discussed in the next chapter.

. Use the code .import cInput from "component address / c-ipunt.vue"; export default {components: {cInput},. 3. The parent component uses import cInput from "component address / c-ipunt.vue"; export default {components: {cInput},. two。 Rich components

Components are independent scopes, just like the JavaScript module in our Node, independent

A component is actually a special Vue instance, which can have its own data, methods, computed, watch, and so on.

The data of a component must be a function

Function returns an object as the data of the component

Export default {name:'c prop: 'value', event:' input',}, props: {}, data () {return {}, watch: {}, methods: {}, mounted () {},}. Communication between parent and child components 1. Parent-> child communication [props Down]

The parent component passes data down to the child component through the props

So the subcomponent defines the parameters to be received

We can see the input box component of Element Ui, with these properties we can redefine the encapsulation

Export default {name: 'value', event:' input',}, props: {labelwidth: {type: String, default: undefined,}, autosize: {default () {return {minRows: 2, maxRows: 4} / / if the default value of this attribute is not used},} InputCss: {type: String, default:'',}, label: {type: String, default:',}, value: {default: undefined,}, prop: {type: String, default: null,}, placeholder: {type: String, default: undefined,}, required: {type: Boolean Default: false,}, width: {type: String,}, type: {type: String, default: undefined,}, autocomplete: {type: String, default: 'on',}, disabled: {type: Boolean, default: false,}, span: {type: Number,},} Data () {return {}}, watch: {}, methods: {}, mounted () {},}

Parent component use

Import cInput from "component address / c-ipunt.vue"; export default {components: {cInput},. 2. Child-> parent value [Events Up]

The child component sends a message to the parent component through events, which is actually the child component sending its own data to the parent component.

In element ui's el-input, there are events such as @ input.native= "updateValue ($event.target.value)" getting the current input value @ keyup.enter.native= "handleEnter" enter @ focus= "focus" to get focus and so on.

Export default {name: 'value', event:' input',}, props: {labelwidth: {type: String, default: undefined,}, autosize: {default () {return {minRows: 2, maxRows: 4} / / if the default value of this attribute is not used},} InputCss: {type: String, default:'',}, label: {type: String, default:',}, value: {default: undefined,}, prop: {type: String, default: null,}, placeholder: {type: String, default: undefined,}, required: {type: Boolean Default: false,}, width: {type: String,}, type: {type: String, default: undefined,}, autocomplete: {type: String, default: 'on',}, disabled: {type: Boolean, default: false,}, span: {type: Number,},} Data () {return {}}, watch: {}, methods: {updateValue (val) {this.$emit ('input', val)}, handleEnter () {this.$emit (' keyup-enter')}, focus () {this.$emit ('focus')},}, mounted () {},}

Parent component use

Import cInput from "component address / c-ipunt.vue"; export default {components: {cInput},. Methods: {mykeyupEnter () {console.log ("I am the input box of the parent component enter")}, myfocus () {console.log ("I am the input box of the parent component to get focus")}}, .3. The son and father pass the value in both directions.

We know that one of the core features of Vue is two-way binding.

V-model is an instruction used to implement two-way binding, limited to use in, components, modifiers .arguments (instead of input listening for change events), .number (input string into a valid number), .trim (input space filtering). So how do the components we encapsulate bind in both directions?

First, props adds a value to receive the data changes of the parent component.

Add a value listener to listen for changes in the data of the parent component.

The event @ input.native= "" starts when the data of the child component changes, so this time triggers this.$emit ('input',val) to pass the data change of the child component to the parent component. "

Export default {name: 'value', event:' input',}, props: {labelwidth: {type: String, default: undefined,}, autosize: {default () {return {minRows: 2, maxRows: 4} / / if the default value of this attribute is not used},} InputCss: {type: String, default:'',}, label: {type: String, default:',}, value: {default: undefined,}, prop: {type: String, default: null,}, placeholder: {type: String, default: undefined,}, required: {type: Boolean Default: false,}, width: {type: String,}, type: {type: String, default: undefined,}, autocomplete: {type: String, default: 'on',}, disabled: {type: Boolean, default: false,}, span: {type: Number,},} Data () {return {modelValue: undefined,}}, watch: {value: {handler (newValue) {this.modelValue = newValue}, immediate: true,},}, methods: {updateValue (val) {this.$emit ('input', val)}, handleEnter () {this.$emit (' keyup-enter')} Focus () {this.$emit ('focus')},}, mounted () {},}

Use

Import cInput from "component address / c-ipunt.vue"; export default {components: {cInput}, data () {return {myName: undefined,}},. Methods: {mykeyupEnter () {console.log ("I am the input box of the parent component enter")}, myfocus () {console.log ("I am the input box of the parent component to get focus")}},. IV. What is a slot?

Slot (Slot) is a concept put forward by Vue, just like the name, slot is used to decide what to carry and insert it into a specified location, so that the template is divided into blocks, modular and more reusable.

Whether the slot is displayed or not and how it is displayed is controlled by the parent component, while where the slot is displayed is controlled by the child component.

How do I use the slot?

Default slot

Parent component

I am the parent component. I am the parent component slot content.

Write what you want to display in the child components referenced by the parent component (with or without tags)

Sub-component (slotOne1)

I am the slotOne1 component

The location where the slot,slot is written in the child component is what the parent component will display

Named slot

Sub-component

Slottwo

Three slot tags are defined in the subcomponent, two of which add name attributes header and footer, respectively

Parent component

I am the parent component

La, la la, la, la.

This is slot for header, name.

This is slot for footer, name.

Use template in the parent component and write the corresponding slot value to specify the actual location of the content in the child component (of course, it does not have to be written to template). Other content with no corresponding value will be placed in the slot without adding the name attribute in the child component.

Scope slot

Sub-component

I am export default {name: 'slotthree', data () {return {user: [{name:' Jack', sex: 'boy'}, {name:' Jone', sex: 'girl'}, {name:' Tom', sex: 'boy'}]}

Bind the required values on the slot tag of the child component

Parent component

I am scope slot {{item}}

Using the slot-scope attribute on the parent component, user.data is the value passed by the child component

After reading this, the article "js instance Analysis of vue Packaging components" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.