Vue2.0 slot分发内容与props验证的方法

<div slot="three">我替换three</div>
<div slot="two">我替换two</div>
<span slot="two">我替换two</span>
<div slot="one">我替换one</div>
</custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<div>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
</div>
`
})
new Vue({
el:"#app"
})
</script>

你猜页面上会显示什么？猜对了我就告诉你-。-

 

具名slot.png

是不是被顺序惊到了，这是因为页面会根据子组件中slot的顺序去替换内容并渲染页面。

可以使用一个匿名的slot，处理那些没有对应slot的内容

 <div id="app">
  <h2>自定义组件</h2>
  <custom>
   <!-- <div slot="one">我替换one</div> -->
   <div slot="three">我替换three</div>
   <div slot="two">我替换two</div>
   <span slot="two">我替换two</span>
   <div slot="one">我替换one</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
   <div>替换无名的slot</div>
  </custom>
 </div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one">
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
    <slot>
     <p>我是无名的slot</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

匿名的slot就会被那些没有对应slot的内容替换。

 

匿名slot.png

三、编译作用域

父组件模板的内容在父组件作用域内编译

子组件模板的内容在子组件作用域内编译