大前端之vue插槽slot

什么是插槽？ 在vue中通过slot可以向组件中指定位置插入内容。 正常情况下调用一个组件的时候，组件显示的内容为com-input组件中模板的内容。可是想在调用组件的时候给组件添加内容，该怎么办呢？ //父组件 我是插槽内容 //子组件com-form

我是组件内容

//显示---我是组件内容 我是插槽内容 插槽的通俗理解就是是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容。 一、单个插槽/默认插槽/匿名插槽 首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。 单个插槽可以放在组件任意位置，但是一个组件有且只能有一个单个插槽，相对应的，具名插槽就可以有很多个。 父组件： 子组件： 最终显示 二、具名插槽 匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。 父组件： 子组件： 最终显示 三、作用域插槽 匿名插槽和具名插槽都是在父组件中定义内容与样式，子组件只是负责放在哪。但是如果子组件提供数据，那这样的话需要子组件的把数据传递给父组件，父组件只需要提供样式即可。 子组件child export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } } } 父组件 最终展示 四、v-slot 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。 // 根组件 // 子组件 最终显示

本文章由javascript技术分享原创和收集