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'这样就可以拿到子组件的数据并展示出来

相关推荐
ModyQyW几秒前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字6 分钟前
Kotlin lazy 委托的底层实现原理
前端
Q_9709563930 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript