Vue把常用 【元件提取】 出來後使用【插槽把父元素】傳入【元件中】

📣文章目錄

• ​​簡介：​​
• ​​該界面需要提取元件如圖：​​
• ​​首先明确需要準備那些：​​
• ​​按照步驟走：​​

• ​​1.元件提取成單獨頁面(提取元件)​​
• ​​2.父頁面引用元件​​
• ​​3.檢視效果​​

簡介：

通常我們會把比較重複的标簽提取到元件中使用，這樣的好處是我們不需要編寫重複代碼，隻需要引入對應元件即可，還有就是如果對通用的元件進行添加新元素，引用的元件也會有相同效果，如果是每個頁面都寫了重複的代碼，哪天産品提新需求添加效果時，那你隻能一個一個頁面進行更改

該界面需要提取元件如圖：

如圖所示：

下拉重新整理這個功能應該是非常常見的吧，如果我單獨在擷取使用者位址這裡加下拉重新整理，那我下一個開發的界面是購物車界面是不是也需要下拉刷下頁面發送請求擷取最新資料呢？索性我們直接吧下拉重新整理提取成一個元件使用，以後有需要我們就引入公共的下拉元件

使用的是Vant 一個輕量、可靠的移動端元件庫裡面的下拉重新整理元件

下拉調用該方法

首先明确需要準備那些：

1. 需要把下拉重新整理的元件提取成單獨的頁面
2. 使用插槽​

   ​slot​

   ​标簽表示父元件的元素
3. 使用​

   ​props​

   ​中定義父頁面傳遞的重新整理方法

按照步驟走：

1.元件提取成單獨頁面(提取元件)

在元件目錄下建立，一般元件目錄叫​

​components​

​

模闆代碼：

<template>
  <van-pull-refresh
      v-model="isLoading"
      success-text="重新整理成功"
      @refresh="onRefresh"
      style="overflow:visible"
  >
    <!-- 使用插槽slot 這個代表元件内父元素會表示在slot标簽中  -->
    <slot></slot>
  </van-pull-refresh>
</template>      

js代碼：

<script>
import { PullRefresh } from 'vant';
export default {
  props:{
    // 接口請求清單的方法
    refresh: {
      //定義成函數，用于傳遞父類的方法
      type: Function,
      required: true,
    },
  },
  components: {
    PullRefresh
  },
  data() {
    return {
      //加載狀态
      isLoading:false
    };
  },
  computed:{
  },
  methods: {
    onRefresh() {
      //調用元件方法内的父類方法,用于重新整理資料
      this.refresh();
      //重新整理完成後關閉重新整理界面
      this.isLoading=false;
      console.log("父方法調用完成後改變狀态",this.isLoading)
    },
  },
};
</script>      

2.父頁面引用元件

script标簽中添加,導入元件的位置

import PullRefresh from '@/views/components/PullRefresh/index';      

模闆代碼中添加元件

<PullRefresh
        :refresh="onRefresh"
    >
      <!--下面的内容會在元件的插槽中展示      -->
      <AddressList v-if="list.length" :list="list"/>
      <van-empty v-else class="empty" :description="listEmptyText"></van-empty>
      <!--可以是任何元素...-->

    </PullRefresh>      

上面的解析:

​

​:refresh​

​​會綁定下拉重新整理元件中的​

​props​

​​中​

​refresh​

​對象并且他的類型是需要接收父元件傳遞的方法

父頁面傳遞到下拉重新整理元件中的​

​onRefresh​

​方法

3.檢視效果

下拉重新整理完成後,也擷取到後端資料了