## vue3 父組件傳遞數據 ``` setup() { const name = ref("coderwhy"); let counter = ref(100); provide("name", readonly(name)); provide("counter", readonly(counter)); const increment = () => counter.value++; return { increment, counter } } ``` 子組件接收數據 ``` setup() { const name = inject("name"); const counter = inject("counter"); const homeIncrement = () => counter.value++ return { name, counter, homeIncrement } } ``` ## vue2 父組件傳遞數據 ``` data() { return { names: ["abc", "cba", "nba"] } }, provide() { return { name: "why", age: 18, length: computed(() => this.names.length) // ref對象 .value } }, ``` 子（其他組件）組件接收數據 ``` <div> HomeContent: {{name}} - {{age}} - {{length.value}} </div> export default { inject: ["name", "age", "length"], } ```