Vue的slot

最新推荐文章于 2019-10-25 13:56:05 发布

翎羽飘

最新推荐文章于 2019-10-25 13:56:05 发布

阅读量302

点赞数

分类专栏：前端框架前端文章标签： vue slot

本文链接：https://blog.csdn.net/u014032819/article/details/80238327

版权

前端框架同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

之前一直没大用过这个功能,但是感觉也是很实用的一个功能,今天研究一下,记录下来.

slot是卡槽的意思,感觉字面意思就是把一些内容通过这个插入到某个位置,官网的话写的是内容分发.

<slot>一般是写在子组件中的, 为了分发内容, 当父组件没有值时,slot中的内容会显示出来.

其实我觉得这也是将父组件的内容分发到子组件的一种方式.

所以感觉使用这个东西的目的一个是实现父组件到子组件的内容传递,类似props, 另一个就是通过不同name的slot,在一个位置呈现不同样式

就如官网上的例子:

父组件中:

<navigation-link url="/profile">
  Your Profile
</navigation-link>

子组件中:

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当父组件有内容的时候,直接显示父组件内容, 当父组件没有内容的时候,加载slot中内容.

如一个整个的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>slot</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="demo">
    <navigation-link>
      <!-- {{message}} -->
    </navigation-link>
    
  </div>
  <script type="text/javascript">
    var root = new Vue({
      el: "#demo",
      data: {
        message: "I am the parent component"
      },
      components: {
        "navigation-link": {
          template: `<div>
                      {{message}}
                      <slot>
                        <p>if there is no parent message, now me</p>
                      </slot>
                    </div>`,
          data(){
            return {
              message: "I am the child messsage",
            }
          }
        }
      }
    })
  </script>
</body>
</html>

通过吧父组件中的{{message}}备注添加删除看到效果.

另外slot也能够支持一个页面加多个,通过不同的name加以区分.

翎羽飘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的slot

之前一直没大用过这个功能,但是感觉也是很实用的一个功能,今天研究一下,记录下来.slot是卡槽的意思,感觉字面意思就是把一些内容通过这个插入到某个位置,官网的话写的是内容分发.&lt;slot&gt;一般是写在子组件中的, 为了分发内容, 当父组件没有值时,slot中的内容会显示出来. 其实我觉得这也是将父组件的内容分发到子组件的一种方式.所以感觉使用这个东西的目的一个是实现父组件到子组件的内容传...
复制链接

扫一扫

专栏目录