Vue 中的透传,插槽,依赖注入

1. 透传attributes

在组件上使用透传attribute : 当你在父组件中使用子组件时,你可以添加一些attribute到子组件上,即使这些attribute没有在子组件的props中声明。

父组件:

复制代码
<!-- 父组件,例如 ParentComponent.vue -->
<template>
  <div>
    <MyComponent
      data-id="123"
      data-user="alice"
      class="my-custom-class"
      style="color: red;"
    />
  </div>
</template>

<script>
import MyComponent from '../components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

<style>
/* 父组件样式 */
</style>

子组件:

复制代码
<!-- MyComponent.vue -->
<template>
    <div v-bind="$attrs">
      <h3>透传的Attributes:</h3>
      <ul>
        <li v-for="(value, name) in $attrs" :key="name">
          {{ name }}: {{ value }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    inheritAttrs: false, // 禁用默认的attribute继承行为
  };
  </script>
  
  <style>
  /* 组件样式 */
  </style>

显示效果:

当然如果你想在控制台打印出来,你可以打印 this.&attrs

复制代码
  <script>
  export default {
    inheritAttrs: false, // 禁用默认的attribute继承行为,
    mounted() {
      // 在组件挂载后,打印透传的attributes
      console.log('透传的Attributes:', this.$attrs);
    },
  };
  </script>

2. 插槽

就是直接在组件中插入对应的模版

2.1 简单点的插入:

ChildComponent.vue:

复制代码
<template>
    <div>
      before
      <slot></slot>
      <slot></slot>
      <slot></slot>
      after
    </div>
</template>

<script setup>


</script>

<style>
</style>

父组件:

复制代码
<template>
  <div class="home">

      <ChildComponent>
        <div>{{hello}}</div>
      </ChildComponent>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'

const hello = ref('Hello world! 2024')
</script>

显示效果:就是将插入的div代替了子组件的slot位置

2.2 在插槽指定的位置,插入指定的值

ChildComponent.vue:

复制代码
<template>
    <div>
      <slot name="header"></slot>
      <slot name="content"></slot>
      <slot name="footer"></slot>
    </div>
  </template>

父组件:

复制代码
<template>
  <div class="home">
    <ChildComponent>
      <template #header>
        <p>This is the header slot</p>
      </template>
      <template #content>
        <p>This is the content slot with a variable: {{ contentVariable }}</p>
      </template>
      <template #footer>
        <p>This is the footer slot</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const contentVariable = ref('This is some content.')
    return { contentVariable }
  }
}
</script>

3. 依赖注入

为了便于祖孙之间数据的传输,

3.1 祖组件向子组件和孙组件传递数据示例

祖组件:

复制代码
<template>
  <div>
    <h1>Ancestor Component</h1>
    <p>Providing a message: "{{ message }}"</p>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from '../components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('ancestorMessage', message);
    return { message };
  }
}
</script>

子组件:

复制代码
<template>
    <div>
      <h2>Child Component</h2>
      <p>Message from Ancestor: "{{ ancestorMessage }}"</p>
      <GrandchildComponent />
    </div>
  </template>
  
  <script>
  import { inject } from 'vue';
  import GrandchildComponent from '../components/GrandchildComponent.vue';
  
  export default {
    components: {
      GrandchildComponent
    },
    setup() {
      const ancestorMessage = inject('ancestorMessage');
      return { ancestorMessage };
    }
  }
  </script>

孙组件:

复制代码
<template>
    <div>
      <h3>Grandchild Component</h3>
      <p>Message from Ancestor: "{{ ancestorMessage }}"</p>
    </div>
  </template>
  
  <script>
  import { inject } from 'vue';
  
  export default {
    setup() {
      const ancestorMessage = inject('ancestorMessage');
      return { ancestorMessage };
    }
  }
  </script>

然后你会发现子和孙组件都是通过inject来接收数据,而祖组件只需要通过provide发送数据

显示效果:

相关推荐
掘金安东尼10 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~12 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务14 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛15 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑18 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭24 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿29 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨38 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js