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

父组件给子组件传参 子组件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>