vue 组件传值

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可以传给父组件的数据,在父组件中可以使用
愿你出走半生,归来仍是少年!
原文地址:https://www.cnblogs.com/wszxx/p/9041326.html