組件間的數據傳遞
// 父組件
<template>
<div class="order">
<dialog-addpro v-on:closedialog="close" :proinfo="proinfo"></dialog-addpro>
</div>
</template>
<script>
import daddpro from '../../daddpro'
export default {
data: function () {
return {
proinfo: {
name: '222',
id: 12
}
}
},
methods: {
close (info) {
// 方法體
}
},
components: {
'dialog-addpro': daddpro
}
}
</script>
// 子組件
<template>
<div class="">
<span>{{ proinfo.name }}</span>
<span>{{ proinfo.id }}</span>
</div>
</template>
<script>
import crumbs from '../../layout/crumbs'
export default {
data: function () {
return {
}
},
props: ['proinfo'],
methods: {
cancel () {
this.$emit('closedialog', this.proinfo)
// 參數 父組件方法名 , 參數
}
}
}
</script>
父組件向子組件傳遞值
傳遞數據給組件:proinfo="proinfo" proinfo為父組件里定義的值，組件取值方式 props: ['proinfo', 'propsdata_show'],可以傳多個對象
自組件向父組件傳值
this.$emit('方法名' , 參數)，觸發當前實例上的事件