Vue子页面给父页面传递数据

Posted 江山一族

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue子页面给父页面传递数据相关的知识,希望对你有一定的参考价值。

子页面:

<template>
<div>
<p>子组件</p>
<button @click="sendMsg">传递到父页面</button>
</div>
</template>

<script>
export default {
name: ‘child‘,
data() {
return {
msg:‘子组件数据‘
}
},
computed:{
addNum(){
return this.num*5
}
},
methods:{
sendMsg(event){
this.$emit(‘sendmsg‘,this.msg)
this.$emit(‘addnum‘,this.addNum)
}
},
props:{
num:{
type:Number,
default:5
}
}
}
</script>

<style>

</style>

 

父页面:

<template>
<div>
<p>父组件</p>
<input type="text" v-model="num" />
<child @sendmsg=‘getMsg‘ :num=‘num‘ @addnum=‘getNum‘/>
<p>{{info}}</p>
<p>{{num}}</p>
</div>

</template>

<script>
import child from ‘./child‘
export default {
name: ‘parent‘,
data() {
return {
info:‘‘,
num:10
}
},
components:{
child
},
methods:{
getMsg(data){
this.info = data

},
getNum(data){
this.num = data

}
}
}
</script>

<style>

</style>

 

以上是关于Vue子页面给父页面传递数据的主要内容,如果未能解决你的问题,请参考以下文章

React:将子状态传递给父状态

vue父页面给子页面传递数据

怎样向父页面script传递变量

Vue通信的几种方式

子组件传递给父组件数据

在jsp页面中,frame之间以及子页面和父页面间参数是如何传递的?