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