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可以传给父组件的数据,在父组件中可以使用
    愿你出走半生,归来仍是少年!
  • 相关阅读:
    计数
    表单验证
    获取位置
    jq事件
    jq选择器
    PHP超文本预处理器(通用开源脚本语言)
    文字超出两行显示省略号
    Vim配置:在win10下用vim编译运行C/C++(异步插件管理,一键运行)
    实验楼HTML基础入门学习
    博客园美化:添加目录,标题设置,代码高亮,主题设置
  • 原文地址:https://www.cnblogs.com/wszxx/p/9041326.html
Copyright © 2011-2022 走看看