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