2023 Vue直播班筆記 - 跨層級資料傳遞 provide(含是否有響應式及雷區)

此筆記僅以個人理解方式記錄

前言

VUE為單向資料流的框架，在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料，然而遇到跨層級的架構時，雖然也是可以一層層傳進去，只是這會造成多餘的處理及凌亂的程式碼，因此才有了 "provide" 來解決我們跨層級的需求。

層級展示圖

程式碼區塊(非響應寫法)

先準備範例

<div id="app"> //根元件
  <div class="container my-5 py-3">
    <div class="btn-group d-block text-center" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-success">Middle</button>
      <button type="button" class="btn btn-danger">Right</button>
      <button type="button" class="btn btn-dark">{{text}}</button>
    </div>
    <card></card>
  </div>
</div>
<script type="module" src="./index.js"></script>

//index.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import { card } from "./templates.js";

const app = createApp({
  data() {
    return {
      text: '我是最外層的text，我要被傳入最內層'
    }
  },
  components: {
    card
  }
})
app.mount('#app')

//templates.js
const listGroups = {
  template: `
  <ul class="list-group ps-0">
    <li class="list-group-item" aria-current="true">An active item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
  </ul>
  `
}

const card = {
  template: `
    <div class="card my-3">
      <div class="row">
        <div class="col-md-4">
          <img src="https://fluv.com/blog/wp-content/uploads/sites/2/2023/08/%E6%9C%AA%E5%91%BD%E5%90%8D%E8%A8%AD%E8%A8%88-9.png" class="img-fluid rounded-start" alt="貓咪">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <listGroups></listGroups>
        </div>
      </div>
    </div>
  `,
  components: {
    listGroups
  }
}

export { card }

架好後就開始展現跨層級用法

1.在外層加入 provide

2.內層元件補上 inject

3.這樣就實現了跨層級功能了，如下圖。

響應式寫法僅差別在於provide寫法，而這裡面也有個地方要注意

-非響應寫法，很直接能看出要傳入甚麼資訊

//非響應
provide:{
    text: '我是最外層的text，我要被傳入最內層'
},

//題外話(雷點分享)
//剛接觸響應時以為只要改成return function就會響應
//這樣其實也只會單純傳入而已哦
provide(){
  return {
   text: '我是最外層的text，我要被傳入最內層'
  }
},

-再來說說響應，對我來說有兩種意思

1.外層provide更動時，連帶內層注入的inject一同更動
2.內層利用"物件傳參考特性"，來達到修改內層進而影響外層

我們稍微調整下程式碼方便展示

利用computed

<div id="app">
  <div class="container my-5 py-3">
    <div class="btn-group d-block text-center" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-success">Middle</button>
      <input type="text"class="btn btn-light" v-model="text" placeholder="請輸入文字">
      <button type="button" class="btn btn-dark">{{text}}</button>
    </div>
    <card></card>
  </div>
</div>
<script type="module" src="./index.js"></script>

//index.js
import {createApp,computed} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
import {card} from "./templates.js";
const app = createApp({
  data() {
    return {
      text: "測試響應",
    };
  },
  //響應
  provide() {
    return {
      text: computed(() => this.text),
    };
  },
  components: {
    card,
  },
});
app.mount("#app");

//templates.js
const listGroups = {
  template: `
  <ul class="list-group ps-0">
    <li class="list-group-item" aria-current="true">An active item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">顯示inject => {{text}}</li>
  </ul>
  `,
  inject:['text'],
}

const card = {
  template: `
    <div class="card my-3">
      <div class="row">
        <div class="col-md-4">
          <img src="https://fluv.com/blog/wp-content/uploads/sites/2/2023/08/%E6%9C%AA%E5%91%BD%E5%90%8D%E8%A8%AD%E8%A8%88-9.png" class="img-fluid rounded-start" alt="貓咪">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <listGroups></listGroups>
        </div>
      </div>
    </div>
  `,
  components: {
    listGroups
  }
}

export { card }

利用物件傳參考特性

<div id="app">
  <div class="container my-5 py-3">
    <div class="btn-group d-block text-center" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-success">Middle</button>
      <button type="button" class="btn btn-danger">{{obj}}</button>
      <button type="button" class="btn btn-dark">{{text}}</button>
    </div>
    <card></card>
  </div>
</div>
<script type="module" src="./index.js"></script>

//index.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import { card } from './templates.js'
const app = createApp({
  data() {
    return {
      text: '我是最外層的text，我要被傳入最內層',
      obj:{
        name:'小明',
        age:18
      }
    }
  },
  //響應
  provide() {
    return {
      text: this.text,
      obj:this.obj
    }
  },
  components: {
    card
  }
})
app.mount('#app')

//templates.js
const listGroups = {
  template: `
  <ul class="list-group ps-0">
    <li class="list-group-item" aria-current="true">An active item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">顯示inject => {{text}}</li>
    <li class="list-group-item">顯示inject => {{obj}}</li>
  </ul>
  `,
  inject:['text','obj'],
  //更改
  created(){
    this.text = '我是text，我被更改了'
    this.obj.age = 20
  }
}

const card = {
  template: `
    <div class="card my-3">
      <div class="row">
        <div class="col-md-4">
          <img src="https://fluv.com/blog/wp-content/uploads/sites/2/2023/08/%E6%9C%AA%E5%91%BD%E5%90%8D%E8%A8%AD%E8%A8%88-9.png" class="img-fluid rounded-start" alt="貓咪">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <listGroups></listGroups>
        </div>
      </div>
    </div>
  `,
  components: {
    listGroups
  }
}

export { card }

我們可以看到如果是 "利用物件傳參考" 的方式跟 "一般傳值" 的方式的差別，text 雖然也有在子組件做修改的動作，但影響範圍也只侷限在該組件上。

最後感謝卡斯伯老師的指點，才能順利釐清。

• joker
• 2024/03/20