vue 父子組件通訊升級版

本文介绍了如何在Vue中处理一个页面上需要显示多个不同对话框的需求,通过创建三个独立的组件来实现。首先展示了子组件的代码,然后详细解释了在父组件中引入和注册子组件的步骤:在template中添加子组件标签,通过data属性传递数组数据,并使用props在子组件中接收并绑定这些数据到el-table。确保父组件传递的数据名与子组件props的数据名保持一致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有一個需求一個頁面需要有超過三個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的數據名要一致

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值