当前位置：首页 > news >正文

provide，inject父传子

news 来源：原创 2024/9/27 1:56:03

这个方法传递子参数，可以让所有的子组件获取到，不能子组件传递给父组件

父组件

说下大概思路，导入privode，然后使用privode方法，有点像redis，key value形式存值，子组件可以通过key来获取你要传的值。你传过去是对象，那么它就是对象，如果你传过去的是数组，那么它就是数组，如果你传过去的是响应式对象，那么它就是响应式对象。这里有可能我理解有错，因为我就尝试传过去个对象或者一个响应式对象，我主要意思就是可以传响应式对象。

<template><Demo4Chiren2 @begin="handleCustomEvent" ref="demoChild" /><button @click="callChildMethod">调用子组件方法</button><p>子组件数据: {{ childData }}</p><demo4-chiren><a href="#">插槽</a></demo4-chiren><VueFooter><template v-slot:url><a href="#">wang</a></template>
</VueFooter>
<!--  <div>-->
<!--    <el-button link type="primary" size="small" @click="handlePrint" id="printTable">-->
<!--      打印-->
<!--    </el-button>-->
<!--    <el-button link type="primary" size="small" @click="print">-->
<!--      返回-->
<!--    </el-button>-->
<!--    <el-table :data="tabledata" style="width: 100%">-->
<!--      <el-table-column fixed prop="date" label="Date" width="150" />-->
<!--      <el-table-column prop="name" label="Name" width="120" />-->
<!--      <el-table-column prop="state" label="State" width="120" />-->
<!--      <el-table-column prop="city" label="City" width="120" />-->
<!--      <el-table-column prop="address" label="Address" width="600" />-->
<!--      <el-table-column prop="zip" label="Zip" width="120" />-->
<!--    </el-table>-->
<!--  </div>--></template><script>
//provide 把父组件所有信息传递给所有子组件
import { defineComponent, ref ,provide } from 'vue';
import VueFooter from "./vueFooter.vue";
import Demo4Chiren2 from './Demo4Chiren2.vue';
import Demo4Chiren from "./demo4Chiren.vue";// 请根据实际路径调整
export default defineComponent({components: {VueFooter,Demo4Chiren,Demo4Chiren2},setup() {const web = {name:"zzzz",url:"#"};// provide("provideWeb",web)//provide 把父组件所有信息传递给所有子组件provide("web",web);const demoChild = ref(null);const childData = ref('');const handleCustomEvent = (data) => {console.log('接收到子组件数据:', data);// childData.value = data.message;};const callChildMethod = () => {if (demoChild.value) {console.log(demoChild.value.sayHi());}};const handlePrint = ()=>{}return {demoChild,childData,handleCustomEvent,callChildMethod,web};}
});
</script>

子组件

导入inject，然后inject方法去key，value取值即可

<template><div>{{ fullName }}</div><slot></slot>
<!--  <div>{{web.name}}</div>-->
</template><script>
//子组件通过inject获取父组件传下来的信息
import { ref, computed,inject} from 'vue';export default {setup() {// 根据key去获取,根据父组件传过来是啥就是啥，如果是响应式数据，那么它就是响应式数据const web = inject('web')console.log("provideUser",web)const firstName = ref('Jane');const lastName = ref('Doe');const fullName = computed(() => firstName.value + ' ' + lastName.value);return { fullName,web };}
}
</script>