Vue子頁面給父頁面傳遞數據
阿新 • • 發佈：2018-05-31
mit info cli .info compute name component parent 子頁面
this.$emit(‘sendmsg‘,this.msg)
this.$emit(‘addnum‘,this.addNum)
}
},
props:{
num:{
type:Number,
default:5
}
}
}
</script>
<p>{{info}}</p>
<p>{{num}}</p>
</div>
</template>
子頁面：
<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
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子頁面給父頁面傳遞數據