組件

• 組件 (Component) 是 Vue.js 最強大的功能之一
• 組件可以擴(kuò)展 HTML 元素咧栗，封裝可重用的代

組件注冊

全局注冊

• Vue.component('組件名稱', { }) 第1個參數(shù)是標(biāo)簽名稱逆甜，第2個參數(shù)是一個選項對象
• 全局組件注冊后，任何vue實例都可以用

<button-click></button-click>

Vue.component("組件的名稱(button-click)"致板，{
data：function(){
return{
       count：0交煞；
            }
      }，
template：'  <button @click="count++">點擊了{(lán){count}}</button>'
})

組件注意事項

• 組件參數(shù)的data值必須是函數(shù)同時這個函數(shù)要求返回一個對象
  分析函數(shù)與普通對象的對比

• 組件模板必須是單個根元素（必須有父元素）
  分析演示實際效果

• 組件模板的內(nèi)容可以是模板字符串
  模板字符串可以使用（支持ES6語法）

-組件命名方式

• 短橫線方式
  Vue.compoent('my-compoent',{ })
• 駝峰方式
  Vue.component("MyComponent",{ })

 <div id="app">
     <!-- 
        4斟或、  組件可以重復(fù)使用多次 
          因為data中返回的是一個對象所以每個組件中的數(shù)據(jù)是私有的
          即每個實例可以維護(hù)一份被返回對象的獨立的拷貝   
    --> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 8素征、必須使用短橫線的方式使用組件 -->
     <hello-world></hello-world>
  </div>

<script type="text/javascript">
    //5  如果使用駝峰式命名組件，那么在使用組件的時候萝挤，只能在字符串模板中用駝峰的方式使用組件御毅，
    // 7、但是在普通的標(biāo)簽?zāi)０逯辛洌仨毷褂枚虣M線的方式使用組件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
    
    
    
    Vue.component('button-counter', {
      // 1亚享、組件參數(shù)的data值必須是函數(shù) 
      // 同時這個函數(shù)要求返回一個對象  
      data: function(){
        return {
          count: 0
        }
      },
      //  2、組件模板必須是單個根元素
      //  3绘面、組件模板的內(nèi)容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">點擊了{(lán){count}}次</button>
          <button>測試123</button>
            #  6 在字符串模板中可以使用駝峰的方式使用組件   
           <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

局部注冊

• 只能在當(dāng)前注冊它的Vue實例中使用
  var componentA={ }
  var componentB={ }
  var componentC={ }
  new Vue({
  el:' #app ',
  components:{
  "componenta":componentA,
  "componentb":componentB,
  "componentc":componentC
  }
  })

 <div id="app">
      <my-component></my-component>
  </div>


<script>
    // 定義組件的模板
    var Child = {
      template: '<div>A custom component!</div>'
    }
    new Vue({
      //局部注冊組件  
      components: {
        // <my-component> 將只在父模板可用  一定要在實例上注冊了才能在html文件中使用
        'my-component': Child
      }
    })
 </script>

Vue組件之間傳值

父組件向子組件傳值

• 父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上。
• 然后子組件用屬性props接收
• 在props中使用駝峰形式侈沪，模板中需要使用短橫線的形式字符串形式的模板中沒有這個限制

組件內(nèi)部通過props接收傳遞過來的值
Vue.component(" menu-item",{
props:[" title"],
template:' <div>{{title}}</div> '
})
父組件用過屬性將值傳遞給子組件
<menu-item title="來自父組件的數(shù)據(jù)"></menu-item>
<menu-item :title="title">

props屬性名規(guī)則

• 在props中使用駝峰形式揭璃，模板中需要使用短橫線的形式，
• 字符串形成的模板中沒有這個限制

<div id="app">
    <div>{{pmsg}}</div>
     <!--1亭罪、menu-item  在 APP中嵌套著 故 menu-item   為  子組件      -->
     <!-- 給子組件傳入一個靜態(tài)的值 -->
    <menu-item title='來自父組件的值'></menu-item>
    <!-- 2瘦馍、 需要動態(tài)的數(shù)據(jù)的時候 需要屬性綁定的形式設(shè)置 此時 ptitle  來自父組件data 中的數(shù)據(jù) . 
          傳的值可以是數(shù)字、對象应役、數(shù)組等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3情组、 子組件用屬性props接收父組件傳遞過來的數(shù)據(jù)  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子組件本身的數(shù)據(jù)'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內(nèi)容',
        ptitle: '動態(tài)綁定屬性'
      }
    });
  </script>

子組件向父組件傳值

• 子組件用$emit()觸發(fā)事件
• $emit() 第一個參數(shù)為 自定義的事件名稱 第二個參數(shù)為需要傳遞的數(shù)據(jù)

• 父組件用v-on 監(jiān)聽子組件的事件
  <menu-item v-on:enlarge-text="fontSize+=0.1"></menu-item>
  子組件觸發(fā)事件
  <button v-on:click='$emit("enlarge-text")'>擴(kuò)大字體</button>

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父組件用v-on 監(jiān)聽子組件的事件
        這里 enlarge-text  是從 $emit 中的第一個參數(shù)對應(yīng)   handle 為對應(yīng)的事件處理函數(shù) 
    --> 
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子組件向父組件傳值-攜帶參數(shù)
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ###  1、子組件用$emit()觸發(fā)事件
            ### 第一個參數(shù)為 自定義的事件名稱   第二個參數(shù)為需要傳遞的數(shù)據(jù)  
          <button @click='$emit("enlarge-text", 5)'>擴(kuò)大父組件中字體大小</button>
          <button @click='$emit("enlarge-text", 10)'>擴(kuò)大父組件中字體大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內(nèi)容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 擴(kuò)大字體大小
          this.fontSize += val;
        }
      }
    });
  </script>

兄弟之間的傳遞

• 兄弟之間傳遞數(shù)據(jù)需要借助于事件中心箩祥，通過事件中心傳遞數(shù)據(jù)
• 提供事件中心 var hub = new Vue()
• 傳遞數(shù)據(jù)方院崇，通過一個事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù))
• 接收數(shù)據(jù)方袍祖，通過mounted(){} 鉤子中 觸發(fā)hub.$on()方法名
• 銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)

 <div id="app">
    <div>父組件</div>
    <div>
      <button @click='handle'>銷毀事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟組件之間數(shù)據(jù)傳遞
    */
    //1底瓣、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、傳遞數(shù)據(jù)方蕉陋，通過一個事件觸發(fā)hub.$emit(方法名捐凭，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收數(shù)據(jù)方凳鬓，通過mounted(){} 鉤子中  觸發(fā)hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2茁肠、傳遞數(shù)據(jù)方，通過一個事件觸發(fā)hub.$emit(方法名缩举，傳遞的數(shù)據(jù))   觸發(fā)兄弟組件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3垦梆、接收數(shù)據(jù)方匹颤，通過mounted(){} 鉤子中  觸發(fā)hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù)  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

組件插槽

• 組件的最大特性就是復(fù)用性奶赔，而用好插槽能大大提高組件的可復(fù)用能力

• 匿名插槽
• Vue.component(' alter-box',{
  templat:<div> <strong>Error惋嚎！</strong> <slot></slot> </div>
  })

 <div id="app">
    <!-- 這里的所有組件標(biāo)簽中嵌套的內(nèi)容會替換掉slot  如果不傳值 則使用 slot 中的默認(rèn)值  -->  
    <alert-box>有bug發(fā)生</alert-box>
    <alert-box>有一個警告</alert-box>
    <alert-box></alert-box>
  </div>

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

具名插槽

• 具有名字的插槽
• 使用 <slot> 中的 "name" 屬性綁定元素

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

    <base-layout>
      <!-- 注意點：template臨時的包裹標(biāo)簽最終不會渲染到頁面上     -->  
      <template slot='header'>
        <p>標(biāo)題信息1</p>
        <p>標(biāo)題信息2</p>
      </template>
      <p>主要內(nèi)容1</p>
      <p>主要內(nèi)容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" 屬性綁定元素 指定當(dāng)前插槽的名字
            <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>

作用域插槽

• 父組件對子組件加工處理
• 既可以復(fù)用子組件的slot因悲，又可以使slot內(nèi)容不一致

<div id="app">
    <!-- 
        1堕汞、當(dāng)我們希望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傳遞數(shù)據(jù)給組件的寫法msg="xxx",
            ###   插槽可以提供一個默認(rèn)內(nèi)容卫旱，如果如果父組件沒有為這個插槽提供了內(nèi)容人灼，會顯示默認(rèn)的內(nèi)容。
                    如果父組件為這個插槽提供了內(nèi)容顾翼，則默認(rèn)的內(nèi)容會被替換掉
            <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>