## 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"], } ```