• 父组件给子组件传参 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>
     
  • 相关阅读:
    数据结构与算法之二叉查找树精简要点总结
    数据结构与算法之并查集的精简要点总结
    数组嵌套实现哈希函数的数据分片应用
    InfluxDB 写入&查询 Qt工程(C++ 客户端 API)
    关于Maven中<packaging>产生的一些问题
    Spring Boot:The field file exceeds its maximum permitted size of 1048576 bytes
    Npm管理命令
    ES6转ES5(Babel转码器)
    IOC容器中的依赖注入(一)
    Nginx常用部分命令
  • 原文地址:https://www.cnblogs.com/lilamisu/p/13937106.html
Copyright © 2020-2023  润新知