vue中父子组件之间的通信
# 父组件向子组件传递数据
父组件向子组件传递数据使用props
进行传递
::: info
简单来说,我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说,父子组件之间的数据传递相当于自上而下的下水管子,只能从上往下流,不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口,这样水(数据)才能往下流。
:::
父组件
<template>
<child :data="title"></child>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data(){
return {
title:"我是传递的数据"
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
子组件(child.vue)
<template>
<div>{{data}}</div>
</template>
<script>
export default {
props:["data"],
created () {
console.log(this.data);
//输出:我是传递的数据
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 子组件向父组件传递数据
子组件向父组件传递数据使用this.$emit
进行传递
父组件
<template>
<child @on-child-data="handleChildData"></child>
</template>
<script>
import child from './child'
export default {
components: {
child
},
methods:{
handleChildData(value){
console.log(value);
//输出:我是父组件传递的数据
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
子组件(child.vue)
<template>
<div @click="handleClick">我要向子组件传递数据</div>
</template>
<script>
export default {
methods:{
handleClick(){
let content = '我是父组件传递的数据'
this.$emit('on-child-data',content)
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13