刚开始看了官方的demo，利用注册component在父页面中的子组件标签中插入内容，达到灵活定制的目的。然而，确实不好理解，所以，就vue常用的组件与页面分开写的方式，我写了一个demo举例说明slot的作用。

      本人刚接触vue不就，感觉slot类似与一个内容占位符，在子页面中利用slot进行占位，在父页面调用时，使用不同的内容去填充这个占位符，从而达到一个组件，多个页面复用的目的。

     我们来看例子：

      1.首先是子组件 tempComp.vue

      

< template >
< div >
< p > child self </ p >
< slot name = "first" ></ slot >
</ div >
</ template >
< script >
export default {
}
</ script >
< style scoped>
</ style >

     2.再就是调用页面LocSlot.vue

< template >
< div >
< p > parent content </ p >
< tem-comp >
< div slot = "first" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
</ ul >
</ div >
</ tem-comp >
</ div >
</ template >
< script >
import temComp from './temComp.vue'
export default {
components: {
temComp
}
}
</ script >
< style scoped>
</ style >

好的，现在我们来说明一下，首先在tempComp中，<slot name="first"></slot>进行占位处理，这个地方允许，父页面中，<tempComp>标签间，名为slot="first"的内容进行显示。再来看我们的父页面，也就是调用页面，在标签中插入内容区域div，并给他命名为slot="first "去填充子组件的占位。

需要知道的是，默认情况下，父页面中的，子组件间加入的内容时不会显示的，除非有占位符这个东东。

当然，上面例子举出的是具有实际名字的slot占位，其实还有一种默认的占位slot，即不给子组件中的占位符slot进行命名即可。那么父页面中，默认会将子组件中的第一个插入内容放置在默认占位符的位子，但是，如果插入数量超过默认占位符数量，则剩余的部分就不显示了。

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue