沒有廢話的vue高級進階( 一 ) 組件精髓概述

唯沉默是最高的輕蔑。 。      -------魯迅

系列前言

這個系列可能會分爲幾部分：

1. 基礎以及高級用法總結
2. 一些比較有表明性的實戰
3. 源碼解析（必定是用最粗俗，不對，是最通俗的語言講解，這個我能夠保證）

總之必定對得起高級進階這幾個字。。。

組件分類

vue組件主要包含：

1. 由vue-router產生的頁面，能夠稱之爲路由組件
2. 獨立基礎組件：例如Date和input這之類的能夠全局複用的基礎組件
3. 業務組件，除了以上兩種就是業務組件

組件精髓

props

• tppe 類型
• default 默認
  • 若是是對象，數組，必需要寫成方法進行返回

msg:{
    type: Array,
    default: ()=>([])
}
複製代碼

• validator 校驗，有一個參數value
• inheritAttrs 是否繼承html特性
• 子組件不能修改父組件傳遞過來的prop

event

方法一

<parent-com @on-click="handleClick"></parent-com>

子組件
<button>點擊</button>
在子組件中觸發
this.$emit('on-click', event);
複製代碼

方法二

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>

子組件
<button>點擊</button>
複製代碼

slot

<slot> 節點就是指定的一個插槽的位置,v-slot:[name]能夠指定插槽的位置，有了name就叫具名插槽

具名slot

元素能夠用一個特殊的屬性 name 來配置如何分發內容。多個 slot 能夠有不一樣的名字。具名 slot 將匹配內容片斷中有對應 slot 特性的元素 父組件

<slotshow>
        <p>{{msg}}</p>
        <h6 slot="xxx">就是沒有廢話！</h6>
        
        vue2.6以上的版本是這樣的
        <h6 v-slot:xxx>就是沒有廢話！</h6>
    </slotshow>
複製代碼

子組件

<div class="slotcontent">
        <slot></slot>
        <slot name="xxx"></slot>
    </div>
複製代碼

做用域插槽

做用域插槽是一種特殊類型的插槽，用做使用一個 (可以傳遞數據到) 可重用模板替換已渲染元素。 在子組件中，只需將數據傳遞到插槽，就像將 props 傳遞給組件同樣，插槽的內容就能夠使用這個傳遞過來的數據在父級中，具備特殊屬性 scope 的 <template> 元素必須存在，表示它是做用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象.

列表組件

var childNode = {
 template: `
     <ul>
     // 經過:text="item.text"進行傳值
     <slot name="item" v-for="item in items" :text="item.text">默認值</slot>
     </ul>
 `,
 data(){
     return{
          items:[
              {id:1,text:'第1段'},
              {id:2,text:'第2段'},
              {id:3,text:'第3段'},
          ]
        }
    }
};

var parentNode = {
 template: `
 <div class="parent">
    <p>父組件</p>
     <child>
            // 經過props進行接收
          <template slot="item" scope="props">
          <li>{{ props.text }}</li>
          </template>
     </child>
 </div>
 `,
 components: {
    'child': childNode
 },
};
複製代碼

組件通訊(第二篇會詳細講解8種用法)

1. ref：給元素或組件註冊引用信息；
2. $parent / $children：訪問父 / 子實例。
3. props 父向子傳遞
4. $emit和$on,子----->父
5. vuex

一些碎知識

1. 改變數組某一項的方法:
   1. 直接改變對象的引用
   2. 能夠使用push,shift等方法
   3. 能夠使用vue的變異方法

   Vue.set(vm.userinfo,2,{a:1})  == vm.$set(vm.userinfo,2,{a:1})
   複製代碼

2. is屬性

   <table>
   	<tr id="row"></tr>  注意is的使用 table中只能使用tr
   </table>
   複製代碼

3. 在子組件中的data必須是一個function,來return 一個對象，這是爲了保證每個實例的data屬性都是獨立的，不會相互影響

第一節就是這些，不喜歡寫廢話

以爲對你有幫助，點個

贊

，後續持續輸出這種簡短有效的文章，幫助你用最短的時間內掌握最多的內容，畢竟誰不喜歡一勞永逸不是？ ❥(^_-) thank you ~

後續目錄

沒有廢話的vue高級進階( 一 ) 組件精髓概述

沒有廢話的vue高級進階( 二 ) 8種組件通訊詳解

沒有廢話的vue高級進階( 三 ) 組件高級用法及最佳實踐