Communication between components
The communication between components is the data transfer of the components. There are parent components to transfer data to the child components, and there are child components to transfer data to the parent component.
The parent component passes data to the child component (the child component calls the data in the parent component)
The parent component transfers data to the child component mainly through property binding. The data that needs to be passed to the child component is passed to the inside of the child component in the form of property binding. After the child component uses the
parent component to pass data to the child component, the child Components must also receive and pass data in a certain way
Vue provides propsproperties to receive data from the parent component
props
props can be an array or an object, used to receive data from the parent component. Props can be a simple array, or use an object as an alternative. The object allows configuration of advanced options, such as type detection, custom validation, and setting default values.
The role of props: to receive the properties passed by the parent component, first define it in the props array before it can be used by the child component
usage:
<div id="app">
<h1>{
{msg}}</h1>
<temp1 :parentmsg='msg'></temp1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'这是父组件的内容显示'
},
methods:{
},
components:{
temp1:{
props:['parentmsg'],
template:'<h1>这是子组件===={
{parentmsg}}</h1>'
}
}
})
</script>
Note: After using the props attribute to receive data, the template template cannot be used {
{msg}}to display the data on the page, but {
{parentmsg}}to render through
The parent component passes the method to the child component (the child component calls the method in the parent component)
Through the custom binding event on the child component, assign the method in the parent component to the custom event, and then use this.$emitthis method inside the child component to call the method in the parent component
this.$emit()
Syntax format: this.$emit('自定义事件的名称')other parameters can also be added
Role: by triggering a custom event to trigger a listener event
usage:
- Separate the data between the child component and the parent component first, so that it is easy to understand
- Binding to child componentscustomizeEvent(
@func) show(){}Pass the method ( ) in the parent component to the custom event (@func='show')- Click the button to trigger the
this.$emit()method (this.$emit('func'))
<div id="app">
<h1>{
{msg}}</h1>
<com1 :parentmsg='msg' @func='show'></com1>
<h5>{
{result}}</h5>
</div>
<template id="temp1">
<div>
<h3>这是子组件的内容:{
{parentmsg}}</h3>
<input type="button" value="调用" @click='btn'>
</div>
</template>
<script>
var com1={
template:'#temp1',
props:['parentmsg'],
methods: {
btn(){
this.$emit('func')
}
},
}
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件的内容显示',
result:''
},
methods: {
show()
console.log('调用父组件身上的show方法'+data);
}
},
components:{
com1
}
})
</script>
The child component passes data to the parent component
- Pass data in the way provided by vue-----this.$emit()
- With the help of browser cache H5 local cache technology
On the basis of the previous example, implement the child component to pass data to the parent component
- In
this.$emit()adding a parameter, the data transfer - Then pass a formal parameter data in the method of the parent component, this data represents the data passed from the child component
- Finally show the data
<div id="app">
<h1>{
{msg}}</h1>
<com1 :parentmsg='msg' @func='show'></com1>
</div>
<template id="temp1">
<div>
<h3>这是子组件的内容:{
{parentmsg}}</h3>
<input type="button" value="调用" @click='btn'>
</div>
</template>
<script>
var com1={
template:'#temp1',
props:['parentmsg'],
methods: {
btn(){
this.$emit('func',123)
}
},
}
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件的内容显示',
result:''
},
methods: {
show(data){
this.result = data;
console.log('调用父组件身上的show方法');
}
},
components:{
com1
}
})
</script>
