Global component registration
('first-component', {
data: function () {
return {
count: 0
}
},
template: '<button @click="count++">{{ count }}</button>'
})
data must be a function
The component template content must be a single root element
The component template content can be a template string
Global components can be nested
Component naming method
('first-component', {/* .... */})
// Camel cannot be used in ordinary tag templates, only camel method can be used in template('firstComponent', {/* .... */})
Local component registration
Partially registered components can only be used in parent components;
var vm = new Vue({
components: {
'hello-world': {
data: function () {
return {
msg: 'hello world'
}
},
template: '<div>{{ msg }}</div>'
}
}
})
props data delivery principle: One-way data flow
The value passed through props is received within the component
('son-com', {
props: ['msg', 'parentMsg']
template: '<div>{{msg + "---" + parentMsg}}</div>'
})
Parent component passes value to child component through attributes
<son-com msg="The value of the parent component" :parent-msg="The value of the parent component bound to bind"></son-com>
props attribute name rules
- Use camel form in props, and short horizontal lines are needed in templates; html is insensitive to case
- There is no limit in strings
props delivery type
<div > <son-com :str="pstr" :num="pnum" <!-- Note if not v-bind The exact attribute value cannot be obtained --> :boolean="pboolean" :arr="parr" :obj="pobj" > </son-com> </div>
('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `
<div>
<div>{{ str }}</div>
<div>{{ num }}</div>
<div>{{ boolean }}</div>
<ul>
<li :key="index" v-for="(item, index) in arr">{{ item }}</li>
</ul>
<div>
<span>{{ }}</span>
<span>{{ }}</span>
</div>
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
pstr: 'hello Vue',
pnum: 12,
pboolean: true,
parr: ['apple', 'banner', 'orange'],
pobj: {name: 'zs', age: 22}
}
})
Subcomponent pass values to parent component
The child component passes the value $emit() to the parent component through a custom event
('son-com', {
template: `
<div>
<button @click="$emit('parent')">Click to enlarge the parent component font</button>
The value is transferred from the second parameter
<button @click="$emit('parent', 10)">Click to enlarge the parent component font</button>
</div>
`
})
Parent component listens for child component events
<div > <div>Parent component</div> <son-com @parent="handle"></son-com> <!-- The received value is fixed $event--> <son-com @parent="handle($event)"></son-com> </div>
var vm = new Vue({
el: '#app',
data: {
font: 10
},
methods: {
handle: function (val) {
+= 5
+= val // At this time, val is the value passed by the child component }
},
})
Non-parent-child component passes value
Communication between separate event center management components
// Create Event Centervar hub = new Vue()
// Listen to events in mountedhub.$on('eventName', fn)
hub.$off('eventName') // Destruction incident
// Handle events in methodshub.$emit('eventName', param)
Component slots
<tmp-com> <!-- Only one tag can be matched --> <p slot="header">Program error</p> <div>I don't have a match</div> <!-- Can match multiple tags --> <template slot="footer"> <p>Match the footer once</p> <p>Match the footer twice</p> </template> </tmp-com>
('tmp-com', {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<div>
If the corresponding tag is not matched above, the default content will be displayed
<slot></slot>
</div>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})
This is the end of this article about Vue's detailed explanation of knowledge points on component development. For more related Vue component development content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!