Vue19_slot插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么

ParadoxLin

104人浏览 · 2021-03-18 17:47:41

ParadoxLin · 2021-03-18 17:47:41 发布

前言：组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。

1. 匿名插槽与具名插槽

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。口是搜索框，还是文字，还是菜单。由调用者自己来决定。

<!--匿名插槽-->
<slot></slot>

<!--具名插槽-->
<template id="cpn">
	<div>
	    <slot name="header"></slot>
	    <slot></slot>
	    <slot name="footer"></slot>
	</div>
</template>


<!--替换-->
<body>
  <div id="app">
    <cpn>
      <div slot="header">替换header</div>
      <div>替换匿名slot</div>
      <div slot="footer">替换footer</div>
    </cpn>
  </div>
</body>

例：
在这里插入图片描述

2. 作用域插槽（待补充）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^