zoukankan      html  css  js  c++  java
  • 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可以传给父组件的数据,在父组件中可以使用
    愿你出走半生,归来仍是少年!
  • 相关阅读:
    Oracle课堂实验一“表的使用”代码。
    Oracle安装时忘记解锁scott用户的解决方案
    PHP中CURL技术模拟登陆抓取网站信息,用与微信公众平台成绩查询
    Fckeditor漏洞利用总结
    js 倒计时 button不可用
    .net 下载图片
    截取字符串
    js 后台弹窗
    账号注册,密码安全级别提示(弱、中、强)代码
    jquery 评论等级(很差,差,一般,好,很好)代码
  • 原文地址:https://www.cnblogs.com/wszxx/p/9041326.html
Copyright © 2011-2022 走看看