文档章节

vue插槽slot的理解与使用

o
 osc_w9s1w4o0
发布于 2019/04/02 18:12
字数 1568
阅读 28
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、个人理解及插槽的使用场景

刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑。既然你用了子组件,你为什么要给它传一些dom,直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示。

可以这样认为,插槽和属性的作用一致,用来传递内容的,但我们不能通过属性传递带标签的内容,所以就需要插槽。其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将<slot></slot>元素作为承载分发内容的出口;

最新的理解:最近学了关于Form表单组件的设计。比如iview中的表单,在 Form 内,每个表单域由 FormItem 组成,可包含的控件有:Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker。

之所以可以在表单域FormItem中选择自己需要的部分,就是在设计的时候FormItem作为Form的子组件,其中又加入了插槽,伊以便于用户的选择。

二、用于理解的例子

目前项目中还没接触到使用插槽解决实际问题很好的例子,只能这样去为了理解插槽而用,可能并没有很好的利用到插槽的好处。

以下代码书写均为新语法。 

在父组件定义想要传入子组件作为插槽的内容,App.vue


<
template> <div id="app"> <div> <input type="text" v-model="info"> <button @click="handleClick">添加</button> </div> <todolist v-for="item in list" :key="item" :message="msg"> <template v-slot:item="itemProps" > <!-- tips1:<span>即为插槽内容,想要传给子组件的带标签的内容         tips2:item是插槽的名字,为具名插槽,可将内容对应插入到子组件中具体的插槽位置  tips3:itemProps可以获取到子组件(即插槽 prop)传出来的状态(值),    插槽 prop 的对象命名为 itemProps,可任意命名,itemProps变量存在于 <template> 作用域中  --> <span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span> </template> </todolist> </div> </template> <script> import todolist from './components/todolist.vue'; export default { name: 'App', components: { todolist }, data(){ return { msg: '4-2-05', info: '', list: [], } }, methods: { handleClick() { // 获取到input输入的东西,然后加入到数组中 this.list.push(this.info); this.info = '' } }, } </script> <style> </style>

在子组件利用<slot></slot>元素作为承载分发内容的出口,父组件的插槽内容将在其中显示,todolist.vue

<template>
  <div>
    {{message}}
  <li class="item">
    <input type="checkbox" v-model="checked">
    <slot name="item" v-bind="{checked}" ></slot>
    <!--插槽内容能够访问子组件中才有的数据是很有用的,又因为父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的
    所以得想办法获取到子组件的数据。-->
    <!--给子组件绑定一个动态参数,checked作为一个 <slot> 元素的特性绑定上去,绑定在 <slot> 元素上的特性被称为插槽 prop-->
  </li>
  </div>
</template>

<script>
  export default {
    props: ['item','message'],
    // 因为父组件在插槽内容里使用item, 即此句代码<span>{{item}}</span>
    // 相当于需要传递给子组件的内容,也就是通常的父子组件通信,所以在子组件需要通过props来获取
    data() {
      return {
        checked: false,
      }
    },
    created() {
      console.log(this.message);
    }
  }
</script>

<style scoped>
  .item {
    color: red;
  }
  li{
    list-style: none;
  }
</style>

父组件传递过来的span标签内容

三、具体知识点

1、具名插槽

上面的例子中子组件里只使用了一个slot插槽,但有时我们在一个子组件里可能会多处使用插槽,我们希望在不同的插槽处插入不同的内容,此时便需要进行区分,<slot> 元素有一个特殊的特性:name。这个特性可以用来定义插槽的名字,在向具名插槽提供内容的时候,我们可以在父组件一个 <template> 元素上使用v-slot 指令,并以 v-slot 的参数的形式写出插槽的名称,并再子组件利用name,来使其一一对应。

//新语法
<!--父组件-->
 <template v-slot:header>
        <p>title slot1</p>
        <p>title slot2</p>
 </template>
 <template v-slot:content="props">
        <p>item slot-scope {{ props }}</p>
 </template>

<!--子组件-->
<slot name="header"></slot>
<slot name="content"></slot>
<slot ></slot>
//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

 

//旧语法
<!--父组件-->
  <p slot="heade">title slot1</p>
  <p slot="heade">title slot2</p>
  <p slot="content" slot-scope="props">item slot-scope {{ props }}</p>

<!--子组件-->
<slot name="header"></slot>
<slot name="content"></slot>
<slot ></slot>
//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

2、作用域插槽

为了使父组件的插槽内容可以使用子组件的数据,可以在 <slot> 元素上绑定想要传递的数据,此特性被称为插槽 prop。同时在父级作用域中,给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,便可获取到。但此内容只在 <template>作用域内可用。

四、自 2.6.0 起有所更新的语法变化

1、带有slot特性的具名插槽

2、带有slot-scope特性的作用域插槽

五、突发奇想的调换

因为看到一个别人写的关于slot的帖子,他应该是写错了插槽在子父组件的内容,这也就相当于从子组件传一个插槽内容给父组件。仔细想想这思路有问题,既然都引用了子组件,父组件便可以访问到子组件的所有内容,现在却非要通过插槽来传递,多此一举。
然后我就试了一下将插槽内容卸载子组件里,果然出现了报错,如下:
  - <template v-slot> can only appear at the root level inside the receiving the component(slot的只能出现在接受组件的根级别)
也就是只能在父组件使用。
 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

hbase2.1.9 centos7 完全分布式 搭建随记

hbase2.1.9 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实际情...

osc_4tfw1dxv
48分钟前
11
0
zookeeper3.5.5 centos7 完全分布式 搭建随记

zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实...

osc_6jhxf9ab
49分钟前
19
0
steam夏日促销悄然开始,用Python爬取排行榜上的游戏打折信息

前言 很多人学习python,不知道从何学起。 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。 很多已经做案例的人,却不知道如何去学习更加高深的知识。 那么针对这三类人,...

osc_ur9mmbck
50分钟前
16
0
python 里 certifi 库的作用

python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公钥 库的路径,我这里是python2.7...

osc_1x6ycmfm
51分钟前
11
0
干掉"ZooKeeper",阿里为什么不用ZK做服务发现?

  20大进阶架构专题每日送达   链接:yq.aliyun.com/articles/601745   2020年Java面试题库连载中   !   正文   站在未来的路口,回望历史的迷途,常常会很有意思,因为我们会不...

osc_q5m9dzk0
53分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部