[Vue] 進階API-Provide

TL;DR

在使用Vue的時候元件有時候會有很多層，使Props來傳遞會造成程式碼複雜。

這時候可以使用Provide，來直接跨多層子元件傳遞資料。

通常適用在驗證登入資訊，要將token傳遞給內層元件。

參考資料

圖示

透過props傳遞

透過provide傳遞

陣列傳遞

html(#app)
vue

<div id="app">
  <div class="p-5">
    <h2>多層級資訊傳遞</h2>
    <ul>
      <li>在外層加入 provide</li>
      <li>內層元件補上 inject</li>
    </ul>
    <card></card>
  </div>
</div>

// 最內層的component，透過外層的provide提供資料，並且在內層中使用inject注入資料
const userComponent = {
  template: `<div>
    userComponent 元件：<br />
    {{ user.name }}, <br />
    {{ user.uuid }}
    </div>
    `,
  inject:['user'],
  created() {
    // 使用inject所傳入的user可以在created生命週期中取到資料
    console.log(this.user);
    // 如果根元件沒有使用 function return 則不能使用響應式
    // this.user.name = '杰倫'
  }
}

const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
  // 使用陣列傳入，資料無法使用this去取用data的內容
  provide:{
    user: {
      name: '小明',
      uuid: 78163
    }
  }
})

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文',
      toggle: false
    }
  },
  components: {
    userComponent
  },
  template: `
      <div class="card" style="width: 18rem;">
        <div className="card-header">card 元件</div>
        <div class="card-body">
          <userComponent></userComponent>
        </div>
      </div>
    `,
});
app.mount('#app');

中間層無法取得user資料

如果中間需要取得user資料，則也需要加入inject後才可取得

陣列provide限制

無法直接取用狀態

在 Line:28 ~ Line:33 (Vue)中，使用陣列傳入資料時，無法使用this去將狀態給傳入到provide中。

e.g:

// **以下為錯誤範例**
const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
  provide:{
    // 無法直接取用this.user
    user:this.user
  }

無響應式

如果在內層傳入資料時，在created生命週期中修改user的內容，外層資料並不會跟著響應修改。

會造成內外層資料不一致的狀態。

const userComponent = {
  template: `<div>
    userComponent 元件：<br />
    {{ user.name }}, <br />
    {{ user.uuid }}
    </div>
    `,
  inject:['user'],
  created() {
    // 如果根元件沒有使用 function return 則不能使用響應式
    this.user.name = '杰倫'
  }
}

如果要解決這個問題，則需要使用函式傳遞的方式如下。

函式傳遞

修改成函式傳遞的形式，則內層元件如果修改傳遞過來的內容時，提供資料的元件也可以同步修改。

html(#app)
vue

<div id="app">
  <div class="p-5">
    <h2>多層級資訊傳遞</h2>
    <ul>
      <li>在外層加入 provide</li>
      <li>內層元件補上 inject</li>
    </ul>
    <card></card>
  </div>
</div>

const userComponent = {
  template: `<div>
    userComponent 元件：<br />
    {{ user.name }}, <br />
    {{ user.uuid }}
    </div>
    `,
  inject:['user'],
  created() {
    // 內層修改資料時，因為外層使用函式傳遞，故外層資料也會同步修改
    this.user.name = '杰倫'
  }
}

const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
// 修改成函式傳遞形式，與data狀態類似，透過return回傳內容。
  provide(){
    return {
      user:this.user
    }
  }
})

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文',
      toggle: false
    }
  },
  components: {
    userComponent
  },
  inject:['user'],
  template: `
      <div class="card" style="width: 18rem;">
        <div className="card-header">card 元件</div>
        <div class="card-body">
          <userComponent></userComponent>
        </div>
      </div>
      {{user}}
    `,
});

app.mount('#app');

總結

透過陣列傳遞(provide)資料時，無法直接取用資料狀態。
透過陣列傳遞資料時，資料不具響應特性（內層改變，中間層不變）

透過函式傳遞(provide)資料時，可以直接透過this.user去取用data內的user狀態
內層變更時，**中層以及外層資料都會同步改變（響應特性）

[Vue] 進階API-Provide

TL;DR​

參考資料​

相關連結​

圖示​

陣列傳遞​

函式傳遞​

TL;DR

參考資料

相關連結

圖示

陣列傳遞

函式傳遞