vue知识点————插槽 slot

slot 插槽 在父组件中引用的子组件 在父组件中写入百度 可在子组件slot插槽中展示出

父组件

html 复制代码
<template>
  <div id="app">
    <child url="https://www.baidu.com">百度</child>
  </div>
</template>

<script>
import child from "./components/child.vue";

export default {
  name: "App",
  components: {
    child,
  },
};
</script>

<style>
</style>

子组件

html 复制代码
<template>
  <div class="child">
    <a :href="url">
      <slot></slot>
    </a>
  </div>
</template>

<script>
export default {
  name: "nav_child",
  props: ["url"],
};
</script>

插槽的作用域

父组件

html 复制代码
<template>
  <div id="app">
    <child url="https://www.baidu.com">百度---{{ user.name }}</child>
  </div>
</template>

<script>
import child from "./components/child.vue";

export default {
  name: "App",
  components: {
    child,
  },
  data() {
    return {
      user: {
        name: "作用域",
      },
    };
  },
};
</script>

<style>
</style>

子组件

html 复制代码
<template>
  <div class="child">
    <a :href="url">
      <slot></slot>
    </a>
  </div>
</template>

<script>
export default {
  name: "nav_child",
  props: ["url"],
};
</script>


这里父组件可以访问父组件的数据并且可在slot中展示到,不可以在父组件中访问子组件的数据,就相当于父组件百度---{{ user.name }}{{ url }}
这里的url是访问不到的 会报错,想拿到子组件的数据请看下面的代码

具名插槽

父组件

html 复制代码
<template>
  <div id="app">
    <child>
      <template v-slot:header>
        <h1>header是标题</h1>
      </div>
      <template>
        <p>这是一段内容在匿名插槽中显示</p>
      </template>
      <template v-slot:footer>
        <p>footer是底部</p>
      </template>
    </child>
  </div>
</template>

<script>
import child from "./components/child.vue";

export default {
  name: "App",
  components: {
    child,
  },
  data() {
    return {
      
    };
  },
};
</script>

<style>
</style>

子组件

html 复制代码
<template>
  <div class="child">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 匿名 -->
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: "nav_child",
};
</script>

插槽中指定name 拿到对应的数据展示,如果没有知道成为匿名也就拿没有定义name的数据

插槽父组件访问子组件数据

父组件

html 复制代码
<template>
  <div id="app">
    <child url="https://www.baidu.com" v-slot="slotProp"
      >百度---{{ user.name }}地址为{{ slotProp.url }}</child
    >
  </div>
</template>

<script>
import child from "./components/child.vue";

export default {
  name: "App",
  components: {
    child,
  },
  data() {
    return {
      user: {
        name: "作用域",
      },
    };
  },
};
</script>

<style>
</style>

子组件

html 复制代码
<template>
  <div class="child">
    <a :href="url">
      <slot :url="url"></slot>
    </a>
  </div>
</template>

<script>
export default {
  name: "nav_child",
  props: ["url"],
};
</script>

通过子组件在slot 上传递url值 在父组件中利用v-slot='slotProp'这样就可以拿到子组件的数据并展示出来

相关推荐
zhanshuo7 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang8 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil10 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录17 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672217 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少22 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫