[Part ３ ] Vue.js 的精随-元件 provide/inject

利用 provide & inject 机制，父元件当作所有其子元件的 provider，无论所属的子元件有多深！

父元件利用 provide option 提供资料
- 要传递的资料使用 provide 定义
子/孙元件利用 inject option 去使用资料

假设有一个这样的层级:

Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

要从todo-items传值给 TodoListStatistics ，可以利用先前介绍的 props 一层一层往下传
TodoList -> TodoListFooter -> TodoListStatistics ~~千万不要~~

这样的情境可以利用 provide/inject

const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- rest of the template -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // Injected 的属性: John Doe
  }
})

但但但，无法传递实体元件的属性，如以下例子
ex:

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    todoLength: this.todos.length // 会报错 `Cannot read property 'length' of undefined`　
    // 无法取得 data 中的 todos
  },
  template: `
    ...
  `
})

如果要取得实体元件中的属性，必须将 provide 转成 function 并回传物件

ex:

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  // function 形式
  provide() {
    // 回传物件
    return {
      todoLength: this.todos.length
    }
  },
  template: `
    ...
  `
})