Skip to content

Latest commit

 

History

History
418 lines (368 loc) · 10.5 KB

14_插槽.md

File metadata and controls

418 lines (368 loc) · 10.5 KB
Raw

认识插槽

image-20221206155720794

在开发中，我们经常封装一个个可复用的组件

  • 在开发中，我们会经常封装一个个可服用的组件
  • 但是我们为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素
  • 比如某些情况下我们使用组件，希望组件显示的是一个按钮，某些情况下我们使用组件希望显示的是一张图片
  • 我们应该让使用者可以决定某一块区域到底存在什么内容和元素

举个栗子，例如我们定制一个通用的导航组件-NavBar

  • 这个组件分成三块区域：左边-中间-右边，每块区域的内容是不固定
  • 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示
  • 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等
  • 右边可能是一个文字，也可能是一个图标，也可能什么都不显示
  • 比如一个搜索框，里面可能有按钮，文本框如果是写死的话，那么传过来一个props的话，只能是固定的东西，是没有办法确定到底要显示，按钮还是文本框的，所以我们就需要预留一个插槽，让别人用的时候来决定到底是什么样的

如何使用插槽？

这个时候我们就可以来定义插槽slot

  • 插槽的使用过程其实是抽取共性、预留不同
  • 我们会将共同的元素、内容依然在组件内进行封装
  • 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素 如何使用slot呢？
  • Vue 中将元素作为承载分发内容
  • 在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽
  • 该插槽插入什么内容取决于父组件如何使用

不使用插槽之前的传值

App.vue

<template>
  <div class="app">
    <show-message title="哈哈哈"
                  content="我是内容哈哈"></show-message>
  </div>
</template>

<script>
import ShowMessage from './ShowMessage.vue';
export default {
  components: {
    ShowMessage
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

ShowMessage.vue

<template>
  <h2>{{title}}</h2>
  <p>{{content}}</p>
  <div class="content">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    }
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

插槽的使用

但是如果我们希望这个地方展示的是一个图片，那么就需要我们预留一个插槽 App.vue

<template>
  <div class="app">
    <show-message title="哈哈哈">
      <button>我是按钮元素</button>
    </show-message>
  </div>
</template>

<script>
import ShowMessage from './ShowMessage.vue';
export default {
  components: {
    ShowMessage
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

ShowMessage.vue

<template>
  <h2>{{title}}</h2>
// 但是如果我们希望这个地方展示的是一个图片那么就需要我们预留一个插槽
//<p>{{content}}</p>
  <div class="content">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    // 写成插槽之后这里就不需要写内容了
    // content: {
    //   type: String,
    //   default: ""
    // }
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

插槽默认值

image-20221206160925774

<template>
  <h2>{{title}}</h2>
  <div class="content">
    <slot>
    // 如果没有传入内容，那么就会显示默认值
    // <show-message>
    // </show-message>
      <p>我是第三个没有传入内容插槽的默认值</p>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "我是标题默认值"
    },
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

总结

写成插槽之后父组件中，写在子组件show-message中间的元素就会去替换子组件中的 

 <div class="content">
    <slot></slot>
  </div>
// 就会变成
<div class="content">
  <button>我是按钮元素</button>
</div>

多个插槽的使用分配

  • 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽
    • 具名插槽顾名思义就是给插槽起一个名字，元素有一个特殊的 attribute:name
    • 一个不带name的slot，会带有隐含的名字default

image-20221206161027599

App.vue

<template>
  <nav-bar>
    <button>返回</button>
    <span>内容</span>
    <a href="#">登录</a>
  </nav-bar>
</template>

<script>
import NavBar from './NavBar.vue';
export default {
  components: {
    NavBar
  }
}
</script>

<style scoped>
</style>

NavBar.vue

<template>
  <div class="nav-bar">
    <div class="left">
      <slot>left</slot>
    </div>
    <div class="center">
      <slot>center</slot>
    </div>
    <div class="right">
      <slot>right</slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.nav-bar {
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
}
.left {
  width: 80px;
  background-color: bisque;
}
.center {
  flex: 1;
  background-color: skyblue;
}
.right {
  width: 80px;
  background-color: aquamarine;
}
</style>

但是如果这样写的话，那么一个插槽就会匹配三个内容，那么就不是我们预期的，一个插槽里面占一个内容了 那么我们就需要给每一个插槽都起一个名字了

具名插槽

image-20221206161208767

App.vue

<template>
  <nav-bar>
    <template v-slot:left>
      <button>返回</button>
    </template>
    <template v-slot:center>
      <span>内容</span>
    </template>
    <template v-slot:right>
      <a href="#">登录</a>
    </template>
  </nav-bar>
</template>

<script>
import NavBar from './NavBar.vue';
export default {
  components: {
    NavBar
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

NavBar.vue

<template>
  <div class="nav-bar">
    <div class="left">
      <slot name="left">left</slot>
    </div>
    <div class="center">
      <slot name="center">center</slot>
    </div>
    <div class="right">
      <slot name="right">right</slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.nav-bar {
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
}
.left {
  width: 80px;
  background-color: bisque;
}
.center {
  flex: 1;
  background-color: skyblue;
}
.right {
  width: 80px;
  background-color: aquamarine;
}
</style>

动态插槽名

  • 什么是动态插槽名呢？

    • 目前我们使用的插槽名称都是固定的

    • 比如 v-slot:left v-slot:center等等

    • 我们可以通过v-slot:[SlotName]方式来动态绑定一个名称

App.vue

语法糖形式写法可以将 v-slot: 换成 #

<template>
  <nav-bar>
    <template v-slot:left>
      <button>返回</button>
    </template>
  // 语法糖形式写法可以将 v-slot:换成#
    <template #center>
      <span>内容</span>
    </template>
    <template #right>
      <a href="#">登录</a>
    </template>
  </nav-bar>
// 这里写成动态的插槽名字
  <nav-bar>
    <template v-slot:[position]>
      <a href="">注册</a>
    </template>
  </nav-bar>
  <button @click="position ='left'">左边</button>
  <button @click="position ='center'">中间</button>
  <button @click="position ='right'">右边</button>
</template>

<script>
import NavBar from './NavBar.vue';
export default {
  components: {
    NavBar
  },
// 这里需要返回一个position否则就会提示position没有定义
  data () {
    return {
      position: 'center'
    }
  }
}
</script>

<!-- scope样式只在当前组件上面有效 -->
<style scoped>
</style>

渲染作用域

  • 父组件子组件都有自己的作用域
  • 在Vue中有渲染作用域的概念
    • 父级模板里面的所有内容都是在父级作用域中编译的
    • 子模板里的所有内容都是在子作用域中编译的
  • 怎么裂解这句话呢？我们可以看一个案例
    • 在我们的案例中ChildCpn自然是可以让问自己作用域中的title内容的
    • 但是在App中，是访问不了ChildCpn中的内容的，因为它们是跨作用域的访问

图片

作用域插槽的使用

image-20221206163901213

image-20221206164437054

image-20221206164510230