父組件給子組件傳參 子組件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>