vue 插槽 slot 使用

最新推荐文章于 2024-09-27 15:27:45 发布

小妤妤

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量140

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43195831/article/details/130388494

版权

文章展示了如何在Vue中定义和使用插槽(slot)来创建可复用的组件。具体步骤包括在`nav-slot`组件中定义`center`和`right`插槽，然后在父组件中引入`nav-slot`并填充这两个插槽，创建了一个包含搜索框和搜索按钮的导航栏。

摘要由CSDN通过智能技术生成

vue 插槽 slot 使用
1、先定义要使用的插槽vue文件（我这里定义的是 nav-slot）

<template>
  <div class="nav">
    <img src="../assets/images/返回.png" alt="">
    <slot name="center"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script>
</script>

<style>
  .nav {
    display: flex;
    justify-content: space-around;
    background-color: #ffa256;
    width: 375px;
    padding: 11px 12px 11px 0;
  }

  img {
    width: 22px;
    height: 22px;
    padding-top: 4px;
  }
</style>

2、在要用插槽的界面引入插槽文件 nav-slot
3、我这里是随便画了个搜索框

 <nav-slot>
   <template #center>
     <div class="search">
       <input type="text" placeholder="请输入关键字">
     </div>
   </template>
   <template #right>
     <button>搜索</button>
   </template>
 </nav-slot>

<style>
  .search {
    text-align: center;
  }

  .search input {
    width: 260px;
    height: 30px;
    outline: none;
    border: 0;
  }

  button {
    width: 60px;
    height: 30px;
    background-color: #ffffff;
    color: #333333;
    font-size: 14px;
    border: 0;
    border-radius: 10px;
  }
</style>