您的位置:首页 > 新闻动态 > 技术文章
2019-05-10

[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件

原理也很简单,子组件使用$emit来触发父组件的函数,子组件借助这个父组件的函数将数据传给父组件。

父组件中方法:

<template>
<div>{{ChildData}}</div>
<router-view @pushData="getChildData"></router-view>
</template>
<script>
export default {
data:function(){
return{
ChildData:"",//定义获取子组件的数据
}
},
methods:{
getChildData (data) {
this.ChildData=data//想要获取子组件的数据,并赋值给自己的ChildData
}
}
}
</script>

 

子组件的数据,并且调用父组件函数来传值:

<template>
<div @click="sendYourData">点我将数据传给父组件</div>
</template>
<script>
export default {
data:function(){
return{
YourData:"我是来自子组件的数据呢",
}
},
methods:{
sendYourData:function () {
this.$emit('pushData',this.YourData)
}
}
}
</script>

 


下一篇:centos系统yum remove iptables后无法登录的补救办法
上一篇:[vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效的问题

© 2010-2014 BENSURE本硕科技. All Right Reserved. 备案号:粤ICP备14074318号