JavaWEB notes 18 Vue components
1, Introduction to components:
- Component: component-based development: each piece of the page is regarded as a separate part and assembled by the user
- Componentization: standard, divide and conquer, reuse, combination
- Vue implements partial component-based development at design time
Define global and local components:
- Define a global component:
Vue.component('name',{template: <div...>}) //Template for component
When using components in the above page: < name > < / name > format
- 1) The data of the component is a function, juxtaposed with the location template: data:function() {}, where the data returned by return can be in json format, which is the same as that written in the data in the previous new Vue. Note that the innerText in the label in the template is wrapped in the form of {msg}}, but line feed parsing cannot be performed
- 2) The template of the component must have a root label: it means that the outermost layer must have a package label
- 3) The data in the component is isolated: the component is used many times, and the data is independent and does not affect each other
- The advantage of global components is that they can be used in all Vue instances
- Define a local component:
Select from the instance object corresponding to new Vue
components:{ Component name:{ template:`Component label` } }
The above code locations are in parallel with the methods locations. Generally speaking, global components are not defined, and local components are more flexible. At the same time, they are more flexible in the definition of components. You can continue to define subcomponents within subcomponents. Note that only the root component has el and subcomponents have template
Code example: defining global components
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- introduce vue.js Library file -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id="sb">
<div>
<div id="" style="height: 200px;width: 200px;background: red;">,
<button type="button">A button</button>
{{sonmsg}}
</div><button type="button" @click="add">A button{{num}}</button>
</div>
</template>
<div id="box">
<!-- Use components
Note that when you click the button, each component will maintain its own count. Because every time you use a component, a new instance of it will be created.
-->
<my-component></my-component>
<my-component></my-component>
</div>
</body>
<script type="text/javascript">
//Define global components
/* Because components are reusable Vue instances, they receive the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are root instance specific options like el. */
Vue.component('my-component', {
//Note: component data is a function
data: function() {
return {
sonmsg: 'I am the data of the subcomponent',
num: 1
}
},
methods: {
add: function() {
this.num += 1;
}
},
//The template of the component must have a root label outside
template:'#sb'
})
//Root component
new Vue({
el: '#box',
data: {
msg: 'Hello'
}
})
</script>
</html>
Code example: defining local components:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- introduce vue.js Library file -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<my-son></my-son>
<my-son2></my-son2>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
components:{
'my-son':{
data:function(){
return {
mydata:"hehehhehehe"
}
},
template:`<div>
<h1>
{{mydata}}
<mysonson></mysonson>
</h1>
</div>`,
components:{
'mysonson':{
template:`<div><h1>I am a subcomponent of a subcomponent</h1></div>`
}
}
},
'my-son2':{
data:function(){
return {
mydata:"hehehhehehe222222222222222222"
}
},
template:`<div><h1>{{mydata}}</h1></div>`
}
}
})
</script>
</html>
2, Data transfer between parent and child components:
1) Transfer data from parent component to child component:
- props: [] array format: get the data passed by the parent component
- In the myson tag above, the format of attribute control is: key = "value"
- Don't forget to write the colon in front of it, which will write the dead value
- However, in the process of transmission, the corresponding value should be selected for flexible transmission
- Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- introduce vue.js Library file -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- You can put the template code of the component into this label -->
<template id="son">
<div>
<h1>Subcomponents{{hehe}}</h1>
<h1>{{num}}</h1>
<h1>{{arr[0]}}</h1>
<h1>{{obj.name}}</h1>
</div>
</template>
<div id="box">
<my-son :hehe="msg" :num="num" :arr='arr' :obj="fujson"></my-son>
</div>
</body>
<script type="text/javascript">
var sonObj =
new Vue({
el: '#box',
data: {
msg: 'Hello',
num: 100,
arr: [10, 20, 30],
fujson: {
'name': 'zhangsan',
'age': 18
}
},
//Define local components
components: {
'my-son': {
//The data of the component is a function
data: function() {
return {
sonmsg: 'Data of subcomponents'
}
},
props: ['hehe', 'num', 'arr', 'obj'], //Get the data passed by the parent component
template: '#son'
}
}
})
</script>
</html>
2) Transfer data from child component to parent component:
- Pass data through custom event: this.$emit(')
- There are two ways: write parentheses and not write parentheses:
<!-- jieshouData($event) Write in parentheses. Write in parentheses $event -->
<son @senddata='jieshouData($event)'></son>
<!--No parentheses -->
<son @senddata='jieshouData'></son>
Trigger a custom event to transfer data,If there are multiple pieces of data, package them into json Object, put json Object passed in the past
this.$emit('senddata', this.sonmsg)
- Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- introduce vue.js Library file -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id="son">
<div>
<h1>I am a subcomponent</h1>
<button type="button" @click="send()">Pass the data of the child component to the parent component</button>
</div>
</template>
<div id="box">
{{msg}}
<!-- jieshouData($event) Write in parentheses. Write in parentheses $event -->
<son @senddata='jieshouData($event)'></son>
<!--No parentheses -->
<son @senddata='jieshouData'></son>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods: {
jieshouData(value) {
//alert(value);
this.msg=value;
}
},
//Define local components
components: {
'son': {
template: '#son',
data: function() {
return {
sonmsg: 'I am the data of the subcomponent',
num:100
}
},
//Hook function
mounted:function(){
this.$emit('senddata', this.sonmsg)
},
methods: {
send() {
//alert("send data")
//Trigger a custom event and transfer data. If there are multiple pieces of data, package them into json objects and transfer the json objects to the past
this.$emit('senddata', this.sonmsg)
}
}
}
}
})
</script>
</html>
Note: you can take out the template code of the component: the lower bracket is required
Put it in the corresponding label above: < template id = "son" > select template:'#son' in the following reference
3, Data transfer between sibling components:
- Data transfer between two components with the help of event center (new Vue)
- In the lifecycle function: bind the listening event in mounted: hub. $on ('event name ', (Val parameter) = > {pass data listening event})
Event triggering component listening: hub. $emit ('event name ', (VAL) = > {}) - Trigger event of A component in methods, the trigger event is the listening event of another component, that is, component A listens as addA, component B listens as addB, and trigger B with hub. $emit ('addB ', (VAL) = > {})
- Destroy custom events between two components: use hub. $off ('event name ') in the parent component to destroy
- Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
<bbb></bbb>
<button type="button" @click="xiaohui()">Destruction event</button>
</div>
<script type="text/javascript">
//1. Create event center
var hub = new Vue();
Vue.component('aaa', {
data: function() {
return {
anum: 0
}
},
template: `<div>
<h1>A assembly</h1>
<h1>{{anum}}</h1>
<button v-on:click='add()'>to B Component transfer data</button>
</div>`,
methods: {
add() {
//alert("pass data to B")
//Trigger the event monitored by component B and pass the value to component B
hub.$emit('addBBB',2);
}
},
//In the lifecycle function, listen for events
mounted: function() {
//The listening event val is the data passed by the sibling component
hub.$on('addAAA', (val) => {
this.anum += val
})
}
})
Vue.component('bbb', {
data: function() {
return {
bnum: 0
}
},
template: `<div>
<h1>B assembly</h1>
<h1>{{bnum}}</h1>
<button v-on:click='add()'>to A Component transfer data</button>
</div>`,
methods: {
add() {
//alert("pass data to A")
hub.$emit('addAAA',3)
}
},
mounted: function() {
//Listening to the event triggered by the other party val is the data passed by the brother component
hub.$on('addBBB', (val) => {
this.bnum += val
})
}
})
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
xiaohui(){
hub.$off('addAAA');
hub.$off('addBBB');
}
}
})
</script>
</body>
</html>