• 父组件给子组件传参 el-dialog 试例


     

    父组件给子组件传参 子组件el-dialog试例

    用watch解决直接更改属性 问题

    vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isVisible"
    ​

    vue.esm.js?65d7:610[Vue warn]:避免直接改变属性,因为每当父组件重新渲染时,该值都将被覆盖。相反,请使用基于属性值的数据或计算属性。道具正在变异:“可见”

     

    父组件
    </template> 
       </div>
           <el-button
                  type="primary"
                  size="small"
                  @click="addActive = true;"
                  >添加活动</el-button
                >
          <addActive :addActive.sync="addActive"></addActive>
        </div>
    </template>
    <script>
        import addActive from "./components/addActive";
        export default {
           components: {
           noSpecial,
           addActive
          },
             data() {
               return {
               addActive: false,
               }
      },
    </script>
    子组件
    <template>
      <div>
        <el-dialog
          :close-on-click-modal="false"
          custom-class="addActive"
          title="请选择需要加入本专题的活动"
          :visible.sync="addActivevis"
          width="650px"
          @close="close"
        >
          <el-tabs v-model="activeName1">
            <whole></whole>
            <conduct></conduct>
            <end></end>
          </el-tabs>
          <el-pagination
            style="margin-top:30px;"
            background
            :page-size="6"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :total="pages.total"
          >
          </el-pagination>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
              >添加</el-button
            >
          </span>
        </el-dialog>
      </div>
    </template>
    <script>
    import whole from "./whole";
    import conduct from "./conduct";
    import end from "./end";
    export default {
      components: {
        whole,
        conduct,
        end
      },
    ​
      watch: {
        addActive(newVal) {
          this.addActivevis = newVal;
        }
      },
      props: ["addActive"],
      data() {
        return {
          addActivevis: false,
          dialogVisible: false,
          activeName1: "first",
          pages: {
            current_page: 1,
            total: 0,
            last_page: 1,
            per_page: 6
          }
        };
      },
      methods: {
        // 点击分页
        handleCurrentChange(val) {
          this.pages.current_page = val;
          this.getActiveList();
        },
        close() {
          this.addActivevis = false;
          this.$emit("update:addActive", false);
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    </style>
     
  • 相关阅读:
    h5 canvas
    css3选择器
    弹性盒模型
    css新增属性
    蒙版 倒影 渐变
    字符串转化为json的三种方法
    Final互评------《弹球学成语》---- 杨老师粉丝群
    Final互评------《飞词》---- 拉格朗日2018
    作业 20181204-4 互评Final版本
    换手
  • 原文地址:https://www.cnblogs.com/lilamisu/p/13937106.html
Copyright © 2020-2023  润新知