# 跨層級資料傳遞 provide

## ==多層級資訊傳遞==

* 在外層加入 provide
* 內層元件補上 inject

==provide== 也非常適用表單驗證上面

在最外層的元件中 加上 provide

// 外層元件 
const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
  // 加上 provide 物件方式
  provide: {
    user: {
      name: '小明',
      uuid: 78163
    },
  }
})

在內層元件 components 賦予 userComponent最內層變數

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

最內層元件使用 **inject** 接收 **provide** 對應的屬性

  //最內層元件 
const userComponent = {
  template: `<div>
    {{ user.name }}
    {{ user.uuid }}
  </div>`,
  // 使用inject ， 接收對應provide 屬性
  inject:['user'],
  created() {
    console.log(this.user);
    // 如果根元件沒有使用 function return 則不能使用響應式
    // this.user.name = '杰倫'
  }
}

<div class="alert alert-danger text-center"> 如果中間內層需要傳遞的話，需要也使用inject 來做接收 </div>

    components: {
      // 對應最內層的元件
      userComponent
    },
    // 內層也須加上 inject
    inject:['user'], 

## ==注意事項：響應式==

如果根元件沒有使用 function return 則不能使用響應式，provide需改成函式方式做處裡

// 外層元件 
const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
  // provide 改成函式方式
  provide(){
    return {
      user : this.user
    }
  }
})