vue如何给插槽slot设置样式？_slot 样式_LL的小班的博客

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

vue如何给插槽slot设置样式？

slot是vue的使用中非常重要的一个标签，但是对于这样的标签也有些许问题，如果我们想直接对slot进行样式的编写呢？给slot添加一个id或者class？，不管是静态的class还是动态绑定的class，在实例使用插槽的时候，会直接替换掉

<template>
	<div id='text'>
		<slot :class="{active: isActive}" name="item-text"></slot>
	</div>
</template>
...components假设为'TabBarItem'
如果这样使用插槽 
<tab-bar-item>
	<div id='text2'></div>
</tab-bar-item>
这里的text2块会直接替换整个slot，最后浏览器编译成 
<div id='text'>
		<div id='text2'></div>
</div>
所以你的class没了？ 
假设更改前源代码如下 
<template>
  <div class="tab-bar-item">
      <slot v-if name="item-icon" ></slot>
      <slot v-else name="item-icon-active" ></slot>
      <slot :class={avtive:isActive} name="item-text"></slot>
  </div>
</template>
<script>
export default {
  name: "TabBarItem",
  data(){
    return {
      isActive: false
</script>
这样无法更改slot中class为active，name为item-text的插槽样式，因为直接被覆盖了，那么如何改呢？ 
<template>
  <div class="tab-bar-item">
    <div v-if="!isActive">
      <slot name="item-icon" ></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active" ></slot>
    </div>
    <div :class="{active:isActive}">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>
在每个slot外面再包一层div即可，将有关属性全部放在外层的div中，而不是slot中，这样就可以保证在替换slot时，不会换掉原有的属性，同时也可以在div中设置class和id，然后设置对应的页面布局
                    vue如何给插槽slot设置样式？slot是vue的使用中非常重要的一个标签，但是对于这样的标签也有些许问题，如果我们想直接对slot进行样式的编写呢？给slot添加一个id或者class？，不管是静态的class还是动态绑定的class，在实例使用插槽的时候，会直接替换掉&lt;template&gt;	&lt;div id='text'&gt;		&lt;slot :class="{active: isActive}" name="item-text"&gt;&lt;/slot&gt;	&lt
slot  可以让组件更加灵活
slot插槽  默认是没有名字的  可以给slot加上name属性
slot也可以设置默认值  一个槽可以被插入多个内容 ，多个内容可以全都放在template中，只要给template命名name即可
slot插槽的使用如下：
<!DOCTYPE htm...
				什么是插槽？
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
slot官方介绍
Props：
name - string，用于命名插槽。
Usage：
 元素作为组件模板之中的内容分发插槽。 元素自身将被替换...
官方解释：<slot>元素作为组件模板之中的内容分发插槽。<slot>元素自身将被替换
也就是说，当父组件使用子组件时候，可以用插槽的方式，将内容分布出去，子组件中，用<slot>来接收父组件传过来的dom进行显示。
插槽的三种不同使用
1.普通使用，没有命名对应名字
//父组件
<div id="app">
		<Child>
            <div slot="">无&l.....
slot 可以让组件更加灵活
	slot插槽 默认是没有名字的 可以给slot加上name属性
	slot也可以设置默认值 一个槽可以被插入多个内容 ，多个内容可以全都放在template中，只要给template命名name即可
slot插槽的使用如下：
<!DOCTYPE html>
<html lang="en">
<head&...
slot代码
<el-tooltip placement="top" >
    <div slot="content" class="a6">增值税普通发票开始小规模纳税人或者开票资料不齐全的购买人，购买人取得后不可以进行进项税额抵扣。若
    您还有疑问，建议联系贵公司财务确认后再提交开票需求。</div>
    <i cl...
我们关注第一列的表头单元格样式，然后去看代码，先来看column的写法：
这里的slots就是表头单元格对应的插槽，title用于表示对应的插槽。同样的，scopedSlots是对应列表单元格的，customerRender就是我们要对应的插槽。所以我们可以看到，在<template>中：
slot="name"是列表单元格模板，slot="customerTitle
				正常情况下，当我们定义了一个class，创建了一个class的实例后，我们可以给该实例绑定任何属性和方法，这就是动态语言的灵活性。先定义class：
>>> class Student(object):
...     pass
然后，尝试给实例绑定一个属性：
>>> s = Student()
>>> s.name = 'Michael' # 动态给实例绑定一个属性