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

Editor to share with you how to use the components in Vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. Registration of components

There are five points to pay attention to when registering components:

1. Data should be written as a function and return a value with return, so that different calls can not affect each other.

2. Template is followed by a floating sign, which is the key above Tab.

3. The content behind the template should be written in a large div. Do not separate multiple div.

4. Props is followed by an array, because there are many prop

5. Save as a js file

Vue.component ("myson", {data () {return {sonmsg: "hello son"}}, template: `

Subcomponent content

Values received by prop: {{sonprop}} `, props: ["sonprop"], methods: {sonclick () {this.$emit ("sonemit", this.sonmsg)}) 2. Use of components

As long as you pay attention to one thing when using it, you should first reference the vue, and then refer to the subcomponents.

Var vm = new Vue ({el: "# app", data: {parentmsg: "parentmsg to sonprop"}}) 3. Father to son

It is easy to pass on from father to son, which is divided into two steps.

1. Define prop in the component

Props: ["sonprop"]

2. When using a component, bind the parent's value with the defined prop

The value in the father is like this.

Data: {parentmsg: "parentmsg to sonprop"}

The detailed delivery process is like this, which looks complicated, but in fact, it is just the two steps mentioned above.

Fourth, the son passes on to the father

The child component passes the value to the parent through the method, the parent and the child each define a method, and then use an intermediate method to connect, remember the use of this intermediate method, there are a lot of steps to break down in detail.

1. Use a click event in the button of the template of the subcomponent

Button

2. Define the method used above in the subcomponent, trigger an intermediate method and pass the data

Sonclick () {this.$emit ("sonemit", this.sonmsg)}

3. When the parent uses child components, bind his own method with an intermediate method

4. Receive data in the parent method, where p can be written as any character

Parentclick (p) {vm.parentmsg=p;}

Detailed code diagram

Running effect

5. Slot

1. Join the slot, and the slot leaves a space in the component, and you can insert anything when using the component.

Define somewhere in the subcomponent:

You can add any tag in that location when using the component

2. When adding multiple slots, name each slot and put each slot in a template when you use it.

Define multiple slots

Template: `

Subcomponent content: {{sonmsg}}

Separation line 111111111111111

Separator line 2222222

Separator line 333333333

``

Use multiple slots, one template for one slot

Button A1 button a2 6, subcomponents pass values to slots

1. Define the intermediate data emitmsg in the sub-component template. You can have any name you like.

2. Use res to receive in the parent component, no matter how many sub-components are received by res. Res is the result set. If there are multiple slot, the data will be in it.

{{res.emitmsg}}

Code presentation

The above is all the content of the article "how to use components in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.