具名插槽、做用域插槽的新寫法

插槽

1. 具名插槽

   自 2.6.0 起有所更新。已廢棄的使用 slot attribute 的語法

   可是咱們有了新的語法，以下：

   子組件 childCom:

   <template id="childCom">
     <div>
       <!-- 具名插槽的針對於組件中不止一個插槽的狀況下使用，使用方式，即：給每一個插槽指定 name 屬性，在使用的時候須要給標籤設置 slot 屬性，且屬性值爲 對應的 name 屬性的屬性值 -->
       <slot name='left'><span>左邊</span></slot> <!--給每一個插槽命名，插槽中間是默認內容-->
       <slot name='center'><span>中間</span></slot>
       <slot name='right'><span>右邊</span></slot>
     </div>
   </template>

   父組件 app:

   <div id="app">
     <cpn></cpn>
     <!-- 2.6.0更新後的插槽使用方式發生了變化 -->
     <!-- 區別在於調動的時候是使用 v-slot:具體名稱,而不是定義一個 slot='具體名稱' 這樣的屬性 -->
     <cpn>
      <!-- 注意：2.6.0 以後的這個寫法中，v-slot:具體名稱 只能寫在 template 標籤中,而廢棄的寫法能夠寫在某個具體的標籤上面 -->
      <template v-slot:center>  <!-- 指明使用的是哪一個插槽 -->
         用戶名：<input type="text">
      </template>
     </cpn>
   </div>

   效果圖：

   注意： v-slot 只能添加在 template 上

2. 做用域插槽

   有時讓插槽內容可以訪問子組件中才有的數據是頗有用的。可是因爲子組件的做用域在子組件，而父組件的做用域在父組件，這樣一來，父組件就訪問不到子組件的信息了，可是咱們又不想用$emit發送事件去傳遞信息，這個時候能夠用做用域插槽來實現。注意：你不要覺得這又是父傳子的一種方式，由於這種方法僅限於在使用插槽的時候纔有用，話很少說，看代碼：

   vm實例：

   <script>
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {},
       components: {
         cpn: {
           template: '#cpn',
           data() {
             return {
               list: ['coderlyl', 'tom' , 'mack']
             }
           },
         }
       }
     });
   </script>

   子組件 childCom:

   <template id="cpn">
     <div>
       <slot :coderlyl='list'>  
       <!--list是子組件data中的數據，coderlyl是本身命名的變量，前面還有v-bind綁定-->
         <ul>
           <li v-for="(item, index) in list" :key="index">{{item}}</li>
         </ul>
       </slot>
     </div>
   </template>

   父組件 app:

   <div id="app">
     <cpn></cpn>
   
     <cpn>
       <template v-slot='lyl'>  <!--這裏的lyl也是本身命名的-->
         <span>{{lyl.coderlyl.join('--')}}</span>
       </template>
     </cpn>
   </div>

   效果圖：

處理邊界狀況

1. $root 用來訪問根組件

2. $parent 用來從一個子組件訪問父組件的實例

3. ref 和 $refs 的用法

   在組件上面使用 ref 這個屬性綁定，屬性值自取，而後就能夠經過 $refs.屬性名 這種方式去獲取到指定組件的實例了。

   其實不單單是組件可以使用 ref ,標籤元素也能使用。

4. 依賴注入

   如今咱們有一個需求，若是咱們存在多個組件嵌套的，而後如今其中某一個組件想訪問其曾祖父組件的方法，那麼使用上面兩種方式都是不可取的，這個時候官方提供了 provide 和 inject 這兩個屬性來解決這個問題。

   • provide 容許咱們指定想要提供給後代組件的數據/方法，且該屬性是一個方法，返回一個對象，鍵名就是咱們要傳到後代組件的標誌
   • 而後在任何後代組件裏，咱們均可以使用 inject 選項來接收指定的咱們想要添加在這個實例上的屬性。該屬性是一個數組類型，跟 props 的數組語法相似

   說到這裏，有的人可能會以爲這不就是跟 props 差很少嘛。沒錯，它確實差很少，可是仍是有區別的，好比，祖先元素不須要知道哪些後代組件使用它提供的屬性；其次，後代組件也不須要知道被注入的屬性來自哪裏

   代碼以下：

   父組件：

   <div id="app">
     <child-com></child-com>
   </div>
   
   <template id="childCom">
     <div>
       <span>我是子組件</span>
       <grand-com></grand-com>
     </div>
   </template>
   
   <template id="grandCom">
     <div>
       <span>我是孫子組件</span>
       <button @click='btnClick'>孫子組件按鈕</button>
       <h2>{{mess}}</h2>
     </div>
   </template>
   
   <script>
     const vm = new Vue({
       el: '#app',      //  父組件
       methods: {
         sendMessage() {
           return '我發送了信息'
         }
       },
       provide() {  //  注意這裏的 provide屬性
         return {
           sendMess: this.sendMessage()  //  提供給後代了一個方法
         }
       },
       components: {
         childCom: {
           template: '#childCom',   //  子組件
           components: {
             grandCom: {
               template: '#grandCom',   //  孫子組件
               inject: ['sendMess'],    //  注意這裏的 inject屬性
               data() {
                 return {
                   mess: ''
                 }
               },
               methods: {
                 btnClick() {
                   this.mess = this.sendMess //  孫子組件用了這個方法
                 }
               },
             }
           }
         }
       }
     })
   </script>

   效果圖：