美文网首页
v-for 循环中,子组件向父组件传值

v-for 循环中,子组件向父组件传值

作者: 忘记_3a6a | 来源:发表于2020-04-20 15:37 被阅读0次
    • 父组件中调用子组件,将 index传入
      <!-- 调用公共分割头部插件 -->
          <commonDividerHead ref="head" :index="index" :dividerHeadInfo="item" @showChange="showChange"></commonDividerHead>
    
    • 子组件传值
    var showChange = { show: this.show, index: this.index };
    this.$emit("showChange", showChange);
    
    • 父组件接收
     showChange(showChange) {
          //  console.log("showChange:",showChange);
          this.dividerHeadInfos[showChange.index].show = showChange.show;
        }
    
     data() {
        return {
          dividerHeadInfos: [
            {
              isShow: true, //是否显示
              show: true, //展开
              title: "用地审批", //名称
              message: "面积/千米", //信息
              buttons: [
                //按钮组
                {
                  title: "保存",
                  click: "this.$parent.say4()", //调用父类方法 (this.$parent.你的方法)
                  type: "primary" //组件样式,查看element中Butten样式,如果有特殊样式需求,请提出
                },
                {
                  title: "取消",
                  click: "this.$parent.say5()",
                  type: "warning"
                }
              ]
            },
            {
              isShow: true, //是否显示
              show: true, //展开
              title: "用地审批2",
              message: "面积/千米2",
              buttons: [
                {
                  title: "保存2",
                  click: "this.$parent.say4()",
                  type: "primary"
                },
                {
                  title: "取消2",
                  click: "this.$parent.say5()",
                  type: "warning"
                }
              ]
            }
          ]
        };
    

    相关文章

      网友评论

          本文标题:v-for 循环中,子组件向父组件传值

          本文链接:https://www.haomeiwen.com/subject/wesdihtx.html