provide函数
- 用于祖先组件传递后代组件数据
- 接收两个参数:字符串名字,变量
inject函数
- 用于接收祖先组件传递的数据
- 接收一个参数: provide 函数的第一个字符串名字
<template> <div id="app"> <h1>我是APP组件 {{name}} --- {{price}}</h1> <Child /> </div> </template> <script> import Child from "./components/Child"; import {reactive, toRefs, provide, } from "vue"; export default { name: 'app', setup() { let car = reactive({ name: '奔驰', price: '100w' }) provide('car', car) // 给后代组合传递数据 return { ...toRefs(car), } }, components: { Child, } } </script> <style> #app { background-color: #42b983; height: 300px; } </style>
<template> <div class="child"> <div>Child组件</div> <Son></Son> </div> </template> <script> import Son from './Son' export default { name: "Child", components: { Son, } } </script> <style scoped> .child { background-color: skyblue; height: 200px; } </style>
<template> <div class="son"> <div>Son组件 {{car.name}} --- {{car.price}}</div> </div> </template> <script> import {inject, } from 'vue' export default { name: "Son", setup() { let car = inject('car') return { car } } } </script> <style scoped> .son { background-color: lightpink; height: 100px; } </style>