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

Today, I will talk to you about how to deeply understand the creation and use of Vue components, which may not be understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

1. What are components?

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements to encapsulate reusable code. At a higher level, components are custom elements, and Vue.js 's compiler adds special functionality to it.

2. The way to create a global component: 1. Vue.extend var com1 = Vue.extend ({/ / specify the HTML structure to be displayed by the component through the template attribute: template: 'this is a component created using Vue.extend'}) 2. Vue.component

Vue.component ('component name', the component template object created) registers the component

Vue.component ('myCom1', com1)

Note: if you use Vue.Component to register a global component with a hump name, you need to change the uppercase hump to lowercase letters when referencing the component, and use the "-" link before two words. If you don't use it, you can just use the name.

Method 2 uses Vue.componentVue.component directly ('mycom2', {template:' this is the component 123'} created directly using Vue.component)

Example:

Mode 3

1. Outside the controlled # app, the template element is used to define the HTML template structure of the component.

This is through the template element, the externally defined component structure is easy to use, not bad!

2. Use id to register components

Vue.component ('mycom3', {template:' # tmpl'}) III. Create local components

Local components are created in the same way as global components. The only difference is that local components are defined in the Vue instance.

4. Data and methods in components

1. Components can have their own data.

2. The data in the component is a little different from the data in the instance. The data in the instance can be an object. But the data in the component must be a method.

3. In addition to being a method, the data in the component must return an object.

4. Data in the component is used in the same way as data in the instance. (same with methods)

Fifth, the mode of communication between components

Props/$emit

Parent component An is passed to child component B through props, and B to An is implemented by $emit in component B and v-on in component A.

Subcomponents:

{{user}} export default {name: "users", props: {users: {/ / parent component child tag custom name type: Array, require: true} li {list-style-position: inside;}

Parent component:

Import Users from "@ / components/users"; export default {name: 'App', data () {return {users: [' Xi'an Post and Telecommunications','Xi'an Petroleum', 'Northwest Politics and Law','Xi'an Industry','Xi'an Finance']}}, components: {Users,}} through events

Subcomponents:

{{title}} export default {name: "Son", data () {return {title: 'Vue.js Demo'}}, methods: {changeTitle () {this.$emit (' titleChanged',' Xi'an University of posts and Telecommunications');}} H2 {background-color: greenyellow;}

Parent component:

{{title}} import Son from "@ / components/Son"; export default {name: "Father", data () {return {title: 'passing a value'}}, methods: {updateTitle (e) {this.title = e}}, components: {Son,}}

The child component sends messages to the parent component through events (events), which is actually the child component sending its own data to the parent component.

After reading the above, do you have any further understanding of how to learn more about the creation and use of Vue components? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.