<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() {
    // 使用inject所傳入的user可以在created生命週期中取到資料
    console.log(this.user);
    // 如果根元件沒有使用 function return 則不能使用響應式
    // this.user.name = '杰倫'
  }
}

const app = Vue.createApp({
  data() {
    return {
      user: {
        name: '小明',
        uuid: 78163
      }
    }
  },
  provide:{
    user: {
      name: '小明',
      uuid: 78163
    }
  }
})

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');