provide,inject父传子

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

父组件

说下大概思路,导入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>
相关推荐
uhakadotcom11 分钟前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
uhakadotcom23 分钟前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
weixin_4578858228 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
慕斯策划一场流浪1 小时前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2562 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特2 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~2 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友2 小时前
JS严格模式,启动!
javascript·后端·node.js