028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
Vue中内容分发<slot>的示例分析
这篇文章主要介绍Vue中内容分发的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
公司主营业务：成都做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出咸丰免费做网站回馈大家。
首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Components 规范草案，将
它可以让我们更加优雅的使用组件。
我对
回到主题，我对内容分发的三点理解：
如果没有
下面我们就对这三点去做一个详细的阐述，先从一个张图开始。
这个大家都见过，一个标准的 dialog 对话框，项目中也经常使用到，我们把它抽出来做成一个组件如下：
标题
x
这是一个标准的 dialog 对话框
取消
确定
首先这个组件不够灵活，内容基本上是写死的，就拿标题来说，我们希望标题是可以变化的，让使用者可以传递标题进来，那么我们该如何去设计我们的这个组件呢？这就是我们今天要说的内容分发
这是一个标准的 dialog 对话框
取消
确定
在父组件中使用它
传递进来的标题
x
你会发现组件渲染之后，
上面我们只是嵌套了一个简单的 div 标签元素，插槽可以传入任何的元素，不管是HTML，还是组件元素。
插槽的默认内容
不仅如此，插槽还支持默认内容，当我们在外部没有传递给插槽内容时，我们可以给插槽一个默认的显示内容，如果外部有内容，默认的内容将会被外部的内容替换掉。
这是默认标题
x
这是一个标准的 dialog 对话框
取消
确定
在父组件中使用它，不嵌套任何的内容时，我们的组件就会有个默认的渲染标题。
//无内容
如果我们在父组件中提供了内容，默认的内容就会被替换。
我是新传递的标题
x
具名插槽
有些时候，我们除了标题有这么高的自由度之外，我们也想其它的内容也有这样的灵活性，让使用者也能通过父组件传递进来，Vue 中给我们提供了方法，我们一次可以使用很多插槽，然后给每一个插槽起个名字，也就是给我们的
于是我们就开始修改我们的对话框
我们在外部使用时，只需要提供相应名称，我们就可以渲染出我们需要的
带名字的插槽
x
这是一个标准的 dialog 对话框
取消
确定
可以看到，我们在外部可以控制组件的全部内容只要我们需要，这给我们的组件带来了很高的灵活性。除了灵活性，Vue 中还给我提供了一种叫 作用域插槽的用法，它让我们的组件更加的复用性。
具名插槽不仅仅只能用在
带名字的插槽
x
作用域插槽
作用域插槽在 Vue 中是一个非常重要的一个功能，它让组件更加的可复用性，但是官方文档上对作用域插槽的解释很令人蛋疼，反正我是看了几遍不是太理解，最后通过自己写了几个案例才明白原来可以这么厉害，如果你也和我一样一开始不太理解，不妨跟着我看看下面的案例或许对你的帮助很大。
首先我们实现一个星级评价组件
这是我们写死的一个星级评价组件，一直都用着还不错，可是突然有一天呢，产品说这个小星星用腻歪了能不能换个别的图标？我最近爱上了 :heart: 形
所以用这个表示吧。到这里，你可能也想到了我们把这个图标给抽离出来，放在外部，所以我们结合上面刚刚学到的
在父组件中使用：
完成之后呢，我们再也不怕以后更换内容的情况了，不管以后怎么换，我都可以在使用的时候直接在外部添加内容即可，但是似乎有一些问题，因为我们的代码看起来不是很优雅，而且我们把操作逻辑都放在的父组件中，这显然不太友好，最好的方式肯定是我们只需要在父组件中直接调用即可，所以作用域插槽这里就起到很大的作用了，我们来看看如果使用作用域插槽是如何保持优雅的。
在父组件中使用：
可以看到我们把操作逻辑全部都放在了组件内部，在外部我们只需要添加需要的元素即可，简单优雅高复用性。
在 Vue2.5.0+，slot-scope 不再限制在
有些同学看到这里可能还没有很好的理解 作用域插槽，那好吧我就送佛送到西，咱继续看一个例子，我们创建一个列表面板组件。
{{title}}
在父组件中使用：
{{props.item.name}}
我们再来给每个酒店添加一些描述标签，也能够完美的展示出来。
{{props.item.name}}
{{props.item.tag}}
画风一转，下面我们把它变成一个消息通知列表，可以看到每个文章的点赞数量。
{{props.item.title}}
可以看到，不管我们如何的去修改数据结构也好，添加不同的内容也罢，我们都可以完美的完成，而且不用修改我们的子组件，只需要在外部调用时填充我们需要的内容即可。
有没有感受到作用于插槽的强大与灵活。
如果用一句话来描述作用域插槽的话：它可以让我们在父组件中访问子组件的数据，就像利用 props 属性让子组件访问到父组件的数据一样。
以上是“Vue中内容分发的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
网站标题：Vue中内容分发<slot>的示例分析
文章路径：http://kswsj.cn/article/jehphc.html
