在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue Element-UI dialog作為子組件,怎么在父組件里控制dial

Vue Element-UI dialog作為子組件,怎么在父組件里控制dialog的顯示與隱藏?

小白,請教各位個問題:

子組件

<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: '上海市普陀區(qū)金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    close () {
      this.$emit('dialogHide')
    }
  }
}
</script>

父組件

<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: '上海市普陀區(qū)金沙江路 1518 弄'
      },],
      isShow: false
    }
  },
  components: {
    modal
  },
  methods: {
    handleClick (row) {
      this.isShow = true
      // console.log(row)
    },
    dialogHanderHide () {
      this.isShow = false
    }
  }
}
</script>

點擊查看倒是可以實現(xiàn)效果,但是報錯

[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>
回答
編輯回答
夢一場

在你的父組件里model 標簽添加一個接收子組件傳遞的數(shù)據(jù)方法@CB-dialog="CB_dialog",在方法里把你的 dialogTableVisiblee改成false,子組件里關閉方法用this.$emit('CB-dialog',false)向父組件傳值,還有你的子組件props圖片描述:['dialogTableVisiblee'],在watch監(jiān)聽變化,賦給你的子組件頁面的值,不要綁定同一個,會干擾
父組件代碼
同上
子組件代碼
同上
同上

2018年1月21日 12:40
編輯回答
舊螢火

用vuex,設置一個狀態(tài),彈框根據(jù)這個狀態(tài)的值來顯示或者隱藏

2018年8月30日 02:10