vue 子父窗體

一、子父組件傳值

比較全：https://blog.csdn.net/libusi001/article/details/131668644

1.Props

子窗口修改父窗口傳的值。props 見如下，一種可以，另一種不可以，版本vue3

2.$refs屬性

父組件可以通過$refs獲取子組件的實例，進而訪問子組件的屬性和方法。

父：

 <el-tab-pane label="通知單表體">
          <warehouse-in-list          
          ref = "Whslist"
          :formListPara="formListPara"
          ></warehouse-in-list>

 // 通過 ref屬性，調用 對應頁面 中的 子組件 view-grid 的屬性方法（也是通過 ref="grid"） 
// extendPara 爲 view-grid組件中 自定義的擴展字段。
   this.$nextTick(() => {
          // this.$refs.child.handleData('父組件傳遞的數據')
          this.$refs.Whslist.$refs.grid.extendPara = 'this.formHeadFields.DepotInId';
          this.$refs.Whslist.$refs.grid.search();
          });     

子：

console.info(this.extendPara);

 

二、子組件，created 只執行第一次

解決方法：見紅色部分 增加代碼 v-if="model"。思路：用完銷燬組件。因爲此處是彈出框的頁面用了子組件，所以每次彈出框都會銷燬組件。

1	<demand-order-out-edit :formHeadPara="orderFormParam" v-if="model"></demand-order-out-edit>

　　如果是this.$tab.open()，可以在vDemandOutEditModel對應的路由中寫上：

 meta: {
      keepAlive: false
   } 

1 2 3 4 5 6 7 8

this.$tabs.open({              text: "委託單",              path: "/vDemandOutEditModel",              query: {                DemandOrderId: row.DemandOrderId,                BusinessType:"",                      });

　　

三、刷新父窗體

父窗體

<template>
  <div>
    <ChildComponent @refresh="refreshParent" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    refreshParent() {
      // 這裏實現刷新邏輯
      console.log('父頁面被刷新');
    }
  }
};
</script>

子窗體 ChildComponent.vue

<template>
  <div>
    <button @click="refreshPage">刷新父頁面</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    refreshPage() {
      // 觸發自定義事件
      this.$emit('refresh');
    }
  }
};
</script>