Vue.component('my-component', {
template: `
`
});
new
Vue({
el: "#app"
});
" title="" data-original-title="复制">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
<my-component>
<p>hi,slots</p>
</my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>
<slot></slot>
<div>
`
});
new Vue({
el: "#app"
});
</script>
一个组件如果需要外部传入简单数据如数字、字符串等等的时候，可以使用property，如果需要传入js表达式或者对象时，可以使用事件，如果希望传入的是HTML标签，那么使用内容分发就再好不过了。所以，尽管内容分发这个概念看起来极为复杂，而实际上可以简化了解为把HTML标签传入组件的一种方法。所以归根结底，内容分发是一种为组件传递参数的方法。
命名插槽
刚刚的案例通过slot标签，一股脑的把组件上下文的内容全部注入到组件内的规定位置。vue.js也提供了命名插槽（named slot）的技术，可以把上下文内的内容分成多个有名字的部分，然后插入到组件的不同位置：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
<my-component>
<p slot='slot1'>hi,slot1</p>
<p slot='slot2'>hi,slot2</p>
</my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>
<slot name='slot1'></slot>
<slot name='slot2'></slot>
<div>
`
});
new Vue({
el: "#app"
});
</script>
此案例使用了两个插槽分别为slot1，slot2，并且把它们放到组件的不同位置。
综合案例
现在我们看一个高级的案例，我来做一个即时贴(sticky)组件，用来显示一个有标题和主体的即时贴。组件会定义好即时贴的结构，外观，而具体的标题和内容，而使用内容分发技术传入的HTML标签：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="" id="app">
<sticky>
<div slot="title">
<h3>Title</h3></div>
<div slot="body"><p>
Body foo bar baz ddd
</p></div>
</sticky>
</div>
<script>
Vue.component('sticky', {
template: `
<div>
<div class="wrapper">
<div>
<div class="title">
<slot name="title"></slot>
</div>
<div class="body">
<slot name="body"></slot>
</div>
</div>
</div>
</div>`
});
new Vue({
el: "#app"
});
</script>
<style>
.wrapper {
display: flex;
width: 180px;
height: 150px;
background: yellow;
border-radius: 10px;
}
.title {
border-bottom:1px solid red
}
.body {
border-bottom:1px solid blue
}
</style>
本案例内，使用上下文通过属性slot创建了两个插槽，分别为title和body，在组件的模板内（template成员）通过<slot>标签的name属性引用title和body，并把它注入且放入到合适的位置上。
关于
作者：刘传君
创建过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail.com 联系到我
出品
bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
脚本宝典总结
以上是脚本宝典为你收集整理的一篇看懂vue.js内容分发全部内容，希望文章能够帮你解决一篇看懂vue.js内容分发所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。