vue 父子組件通訊升級版

最新推荐文章于 2023-04-03 19:01:39 发布

低調的D吖

最新推荐文章于 2023-04-03 19:01:39 发布

阅读量146

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/software20121216/article/details/104778610

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何在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的數據名要一致