catalogue
1. Registered components (global components, local components, demo and template modules):
(1) Basic steps for registering components:
(1) The component object also has a data attribute
(1) Transfer data from parent to child [Prop]:
ps: Prop verification (the component can specify verification requirements for props):
(2) Transfer data from child to parent [emit]:
4. Vue parent-child component storage data access:
(3) Child component accessing parent component: use $parent
1, Components:
Component directory
1. Register components (global components, local components and mini demo)
2. Component data storage
3. Parent child component communication (data transfer from parent to child, data transfer from child to parent)
4. Access to stored data of parent-child components:
5. slot
1. Registered components (global components, local components, demo and template modules):
(1) Basic steps for registering components:
① Create the component constructor object Vue extend( ); Method [can be omitted]
② Register component Vue Component ({tag name of component: component constructor object});
③ Use components within the scope of Vue instances
(2) Global component demo:
<div id="app">
<runoob></runoob>
</div>
<script>
// register
Vue.component('runoob', {
template: '<h1>Custom components!</h1>'
})
// Create root instance
new Vue({
el: '#app'
})
</script>
(3) Local component demo:
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>Custom components!</h1>'
}
// Create root instance
new Vue({
el: '#app',
components: {
// < runoob > will only be available in the parent template
'runoob': Child
}
})
</script>
(4) Simplification of template module (separate writing of template): encapsulate its contents into the template tag.
<!-- Use components -->
<my-cpn></my-cpn>
<!-- Template -->
<template id="cpn">
<div>
<h1>nihao</h1>
</div>
</template>
let app = new Vue({
el: '#app',
components: {
'my-cpn': {template: `#cpn`}
}
});
2. Component data storage:
(1) The component object also has a data attribute
(2) ☆ the data attribute must be a function, and the function returns an object with data stored inside
3. Parent child component communication (data transfer from parent to child, data transfer from child to parent)
(1) Transfer data from parent to child [Prop]:
● Prop: the child component receives external (or parent component) data on its own label using custom attributes, and then receives the data into Prop. [receiving parent component data - Dynamic Prop, requires v-bind binding attributes, and the data can be obtained from vue instance]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html Hump writing is not supported for the time being</title>
</head>
<body>
<div id="app">
<!--
The data of the child component or the outside (for example, it can also be the parent component) needs to be used on its own label props To receive from the user-defined properties in,
If the data you want to receive comes from the parent component[ Vue [example]------By binding properties (data can be from vue (get from instance)
-->
<!--Static prop-->
<cpn c-info="info"></cpn><br/>
<!--dynamic prop-->
<cpn :c-info="info"></cpn>
</div>
<template id="cpn">
<div>
<h1>cpn Content of</h1>
<ul>
<li v-for="item in cInfo">{{item}}</li>
</ul>
</div>
</template>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
const cpn = {
template: `#cpn`,
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
}
let app = new Vue({
el: '#app',
data: {
message:'Dynamic binding properties v-bind',
abc: {
id: '1',
name: 'Parent class info Medium name',
age: '1'
},
info: {
id: '1',
name: 'Parent class info Medium name',
age: '15'
}
},
components: {
cpn
}
});
</script>
</body>
</html>
ps: Prop verification (the component can specify verification requirements for props):
Vue.component('my-component', {
props: {
// Basic type check (` null 'and ` undefined' will pass any type verification)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with default value
propD: {
type: Number,
default: 100
},
// Objects with default values
propE: {
type: Object,
// Object or array defaults must be obtained from a factory function
default: function () {
return { message: 'hello' }
}
},
// Custom validation function
propF: {
validator: function (value) {
// This value must match one of the following strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
(2) Transfer data from child to parent [emit]:
● the sub component sends a message to the parent component through $emit('user defined event name', data variable), and listens for the events defined by the sub component [the function to listen to the call can directly receive the data variable through a user-defined parameter]
<!-- Parent component -->
<div id="app">
<!-- The subcomponent listens to the sent data while listening to the customized events num，Event points to a function by customizing a parameter value You can get the data directly num -->
<cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- Templates for subcomponents -->
<template id="cpn">
<div>
<h1>Templates for subcomponents</h1>
<button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button>
</div>
</template>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
const cpn = {
template: `#cpn`,
data(){
return{
num: 99
}
},
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
methods: {
btnClick(item){
console.log('The child component receives the data passed by the parent component' + item);
//The first parameter of $emit is the custom event name and send data num
this.$emit('item-click', this.num);
}
}
}
let app = new Vue({
el: '#app',
data: {
info: {
id: '1',
name: 'yile',
age: '15'
}
},
methods: {
itemClick(value){
console.log('The parent component listens to the events sent by the child component and receives the data from the child component' + value);
}
},
components: {
cpn
}
});
</script>
(1) The parent component accesses the data stored in the child component data: use $children or $refs
(Note: this.$children gets an array containing all sub component objects.)
(2) Use of $refs:
■ $refs and ref instructions are usually used together
■ first, we bind a specific ID to a sub component through ref
■ secondly, through this$ refs. ID to access the component
(3) Child component accessing parent component: use $parent
2, slot
1. Compile scope:
Everything in the parent component template (such as variables) will be compiled in the parent scope; everything in the child component template will be compiled in the child scope.