详解Vue学习笔记入门篇之组件的内容分发(slot)

<child-component>
 {{ message }}
</child-component>

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

Vue.component('child-component', {
 // 有效，因为是在正确的作用域内
 template: '<div v-show="someChildProperty">Child</div>',
 data: function () {
  return {
   someChildProperty: true
  }
 }
})

<div id="app">
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>初始内容1</p>
    <p>初始内容2</p>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <div>
    <h2>我是子组件的标题</h2>
    <slot>
      只有在没有要分发的内容是才出现。
    </slot>
  <div>
`,
})
new Vue({
  el:'#app'
})

<div id="app">
  <h1>我是父组件的标题</h1>
  <my-component>
  </my-component>
</div>

<div id="app">
  <my-component>
    <h1 slot="header">这是标题</h1>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p slot="footer">联系信息</p>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  <div>
`,
})
new Vue({
  el:'#app'
})

<div id="app">
  <my-component>
    <template scope="props">
      <p>hello from parent</p>
      <p>{{props.text}}</p>
    </template>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <div class="child">
    <slot text="hello from child"></slot>
  <div>
`,
  props:['text']
})
new Vue({
  el:'#app'
})

<div id="app">
  <my-component :items="items">
    <template slot="item" scope="props">
      <li>{{props.text}}</li>
    </template>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <ul>
    <slot name="item" v-for="item in items" :text="item.text"></slot>
  </ul>
`,
  props:['text','items']
})
new Vue({
  el:'#app',
  data:{
    items:[
      {text:'item1'},
      {text:'item2'},
      {text:'item3'},
    ]
  }
})