vue2.0 组件之间的数据传递

Posted 2020-08-25 love星期六

组件间的数据传递
// 父组件
<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(‘方法名‘ , 参数)，触发当前实例上的事件