1.父组件向子组件传递数据,通过给子组件添加一个属性,默认使用v-model来绑定,子组件中通过props来接受传过来的数据
2.子组件向父组件传递数据,通过子组件定义一个方法,将数据作为参数传递过去,通过this.$emit('methods',a),父组件就可以使用这个方法了
直接在子组件的函数中将需要传给父组件的数据return出去就可以了
3.父组件触发子组件内部的事件,通过为子组件添加ref属性,通过ref获取子组件dom元素,通过this.$refs[domName].methodsName()来触发
父组件:
<div class="add-shipOrders">
<div class="page-nav">
<h3 class="nav-title">{{pageTitle}}</h3>
<div class="nav-btn-group">
<el-button type="text" @click="goBack">返回</el-button>
</div>
</div>
<edit-shipOrder ref="addShipOrder" v-model="copyData" :fromOrderData="fromOrderData" v-on:handleChildData="childData">
</edit-shipOrder> //v-moldel相当于value handleChildData事件,相当于v-on:click类型
</div>
子组件:
props: {
value: {
type: Object,
default () {
return {};
}
},
fromOrderData: {
type: Object,
default () {
return {};
}
},
},
onSelect() {
return new Promise((resolve, reject) => {
if (this.selectedOrder.orderCode) {
resolve(this.selectedOrder);//this.selectedOrder可以在父组件中拿到
} else {
this.$message({
message: "请选择",
type: "warning"
});
}
});
}
通过resolve可以传给父组件的数据,在父组件中可以使用