Xiaobai, may I ask you a question:
subcomponents
<template>
<el-dialog title="" :visible.sync="dialogTableVisiblee" @close="close">
<el-table :data="gridData">
<el-table-column property="date" label="" width="150"></el-table-column>
<el-table-column property="name" label="" width="200"></el-table-column>
<el-table-column property="address" label=""></el-table-column>
</el-table>
</el-dialog>
</template>
<script>
export default {
props: {
dialogTableVisiblee: Boolean
},
data () {
return {
gridData: [{
date: "2016-05-02",
name: "",
address: " 1518 "
}]
}
},
methods: {
close () {
this.$emit("dialogHide")
}
}
}
</script>parent component
<template>
<div class="wrap">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"></el-button>
</template>
</el-table-column>
</el-table>
<modal @dialogHide="dialogHanderHide" :dialogTableVisiblee="isShow"></modal>
</div>
</template>
<script>
import modal from "./modal"
export default {
data () {
return {
tableData: [{
date: "2016-05-02",
name: "",
member: 1,
invited: 77,
id: 789,
address: " 1518 "
},],
isShow: false
}
},
components: {
modal
},
methods: {
handleClick (row) {
this.isShow = true
// console.log(row)
},
dialogHanderHide () {
this.isShow = false
}
}
}
</script>Click to view can achieve the effect, but report an error
[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: "dialogTableVisiblee"
found in
---> <Modal> at src\components\modal.vue
<Index> at src\components\index.vue
<App> at src\App.vue
<Root>
