有一個需求一個頁面需要有超過三個dialog彈出 每次彈出的不同 然後用了比較笨的方法寫了三個組件
子組件:廢話不多說 上代碼
#template代碼部分
<el-dialog ref="dialogTitle"
:title="添加供應商"
:visible.sync="visible"
:before-close="handleClose">
<el-input :placeholder="供應商名字" style="width: 400px; margin: 10px"></el-input>
<el-button type="primary" icon="el-icon-search">{{ $t('commonButton.search') }}</el-button>
<el-table>
<el-table-column :label="供應商名字" prop='supplierName'>
<!--supplierName-->
</el-table-column>
</el-table>
</el-dialog>
#script代碼部分
<script>
export default {
name: 'addSupplier',
props: ['visible'],
data() {
return {
}
},
methods: {
handleClose() {
this.$emit('close')
}
}
}
</script>
子組件已經完成後呢 需要在父組件如何做呢
1. 引入這個組件並註冊
import addSuppliers from '@/views/components/addSupplier'
components: {
addSuppliers
},
2.將子組件標籤在父組件template寫入
<addSuppliers :visible="addSuppliersVisible" @close="addSuppliersVisible=false"></addSuppliers>
3.這時候已經出來頁面了 那麼如何將數據傳給子組件並且顯示呢
4.在父組件綁定數據 並且在data 添加數據類型為數組
v-bind:data="supplierData"
5.將數據傳給子組件el-table並綁定-> props & :data=“data”
props: ['data'],
完成!!!
注意:父組件綁定v-bind:數據名 和子組件的:props的數據名要一致