Vue框架之組件插槽

◆ 匿名插槽：

  <div id="app">
    <!-- 這裏的所有組件標籤中嵌套的內容會替換掉slot  如果不傳值 則使用 slot 中的默認值  -->  
    <alert-box>有bug發生</alert-box>
    <alert-box>有一個警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      組件插槽：父組件向子組件傳遞內容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
		# 當組件渲染的時候，這個 <slot> 元素將會被替換爲“組件標籤中嵌套的內容”。
		# 插槽內可以包含任何模板代碼，包括 HTML
          <slot>默認內容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

◆ 具名插槽：

• 具有名字的插槽
• 使用 中的 “name” 屬性綁定元素

 <div id="app">
    <base-layout>
       <!-- 2、 通過slot屬性來指定, 這個slot的值必須和下面slot組件得name值對應上
				如果沒有匹配到 則放到匿名的插槽中   --> 
      <p slot='header'>標題信息</p>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
      <!-- 注意點：template臨時的包裹標籤最終不會渲染到頁面上     -->  
      <template slot='header'>
        <p>標題信息1</p>
        <p>標題信息2</p>
      </template>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
			###	1、 使用 <slot> 中的 "name" 屬性綁定元素 指定當前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
			###  注意點： 
			###  具名插槽的渲染順序，完全取決於模板，而不是取決於父組件中元素的順序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

◆ 作用域插槽：

• 父組件對子組件加工處理
• 既可以複用子組件的slot，又可以使slot內容不一致

 <div id="app">
    <!-- 
		1、當我們希望li 的樣式由外部使用組件的地方定義，因爲可能有多種地方要使用該組件，
		但樣式希望不一樣 這個時候我們需要使用作用域插槽 
		
	-->  
    <fruit-list :list='list'>
       <!-- 2、 父組件中使用了<template>元素,而且包含scope="slotProps",
			slotProps在這裏只是臨時變量   
		---> 	
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">
            {{slotProps.info.name}}		         
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
			###  3、 在子組件模板中,<slot>元素上有一個類似props傳遞數據給組件的寫法msg="xxx",
			###   插槽可以提供一個默認內容，如果如果父組件沒有爲這個插槽提供了內容，會顯示默認的內容。
					如果父組件爲這個插槽提供了內容，則默認的內容會被替換掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>