<div id="app">
  <div class="p-5">
    <h2>多層級資訊傳遞</h2>
    <ul>
      <li>在外層加入 provide</li>
      <li>內層元件補上 inject</li>
    </ul>
    <card></card>
    {{user}}
  </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
      }
    }
  },
  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');