VUE父子组件之间的通信
在写组件嵌套过程中，必然涉及到父子组件之间的通信问题，父组件向子组件传递很简单，可以通过props来实现。
父组件向子组件传递参数
先来看父组件：
<template>
<Son :childCom="content"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
components:{
Son
},
}
</script>子组件接收需要在porps对象中定义一下，有两种方式可以进行定义
第一种，只定义接收名，不进行类型校验：
<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
props:["childCom"]
}
</script>另一种方式是进行类型校验，如果类型不一致，则会进行报错：
<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
}
}
}
</script>子组件向父组件传递参数
子组件向父组件传递有两种方式，先说第一种
$emit
父子组件使用emit和v-on时，子组件使用emit触发，父组件在实例中v-on自定义事件监听。
父组件：
<template>
<Son :childCom="content" @sendMsg="getMsg"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
methods:{
getMsg(data){
console.log(data);
}
},
components:{
Son
},
}
</script>子组件
<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
<button @click="sendMessage">发送数据</button>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
methods:{
sendMessage(){
this.$emit("sendMsg",this.msg);
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
}
}
}
</script>调用父组件方法
第二种方法就是直接调用父组件的方法，通过方法参数传递的方式来进行数据交互，原理就在于父组件将其自身的方法通过props传递给子组件，子组件调用传参即可。
父组件：
<template>
<Son :childCom="content" :fatherClick="getMsg"></Son>
</template>
<script>
import Son from './son'
export default{
name:"father",
data(){
return {
content:'落帆亭'
}
},
methods:{
getMsg(data){
console.log(data);
}
},
components:{
Son
},
}
</script>子组件：
<template>
<div>{{msg}}</div>
<div>{{childCom}}</div>
<button @click="sendMessage">发送数据</button>
</template>
<script>
export default{
name:"son",
data(){
return {
msg:"这里是子元素"
}
},
methods:{
sendMessage(){
this.fatherClick(this.msg);
}
},
props:{
childCom:{
type:String,
default:"默认字符"//这里是提供默认值，如不需要可不添加
},
fatherClick:{
type:Function
}
}
}
</script>以上几种方式就是在vue中父组件和子组件之间的数据传递
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录