Vue中slot插槽使用與理解

[Talk is cheap. Show me the code]

不想看理論知識請直接移步最後代碼示例。

1、插槽指的是什麼

你能夠把slot簡單的理解爲，向父組件向子組件中傳遞HTML，咱們能夠根據不一樣的頁面傳遞不一樣的html模板到子組件中，已到達在不一樣的業務場景顯示不一樣的頁面的要求，固然你也能夠傳遞數據、方法。slot又包括三種插槽，匿名插槽、具名插槽、做用域插槽。 若是你想要更精細的解釋請移步
Vue官網slot
知乎：如何理解Vue.js的組件中的slot?

2、代碼示例

2.1匿名插槽的使用

父組件中調用子組件TransportDialog

<TransportDialog
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
    >
      <template>
        <div>
          我是一個匿名的插槽
        </div>
      </template>
      
    </TransportDialog>

複製代碼

子組件中預留好了 槽 ，若是父組件中的slot有名字，template就會顯示在與slot中name相對應的位置，若是沒有就回顯示在默認的slot位置。

匿名插槽的顯示
 <slot />
複製代碼

2.2具名插槽的使用

<TransportDialog
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
     >
      <template slot="test" >
        <div>
          我是一個具名插槽：slot="test"
        </div>
      </template>
    </TransportDialog>

複製代碼

<slot name="test"  />
 
複製代碼

2.3做用域插槽

做用域插槽其實就是 [插與槽] 的數據傳遞，能夠簡單理解爲父子組件間的數據傳遞。
Vue官方連概念都省了，有時候不得不感嘆官網文檔的精簡。(大霧)

父組件

<TransportDialog2
      ref="transportForm"
      :show.sync="dialogFormVisible"
      :dialogdatas="dialogdatas"
      :form="transportForm"
      @btnConfirm="btnConfirm"
    >
      <!-- 2.6 slot-scope已經被廢棄 -->
      
      <template slot="test" slot-scope="props">
        <el-form-item label="名稱">
          <el-input
            v-model="props.testFn"
            placeholder="請輸入名稱"
            @keyup.native="slotFn(props.testFn)"
          />
        </el-form-item>
      </template>

      <template slot="test" v-slot="testFn">
        <el-form-item label="名稱">
          <el-input
            v-model="testFn"
            placeholder="請輸入名稱"
            @keyup.native="slotFn(testFn)"
          />
        </el-form-item>
      </template> 
      
    </TransportDialog2>
複製代碼

data(){
    return{
    /** 這裏是測試傳遞給子組件的值*/
         testFn: '測試'
    }
},
methods:{
    slotFn(data){
        console.log(data)   //這裏就是input裏綁定的值
    }
}
複製代碼

子組件放置slot處

<slot name="test" :testFn="testFn" />
複製代碼

3、業務場景

爲了便於理解，所以把業務場景加進來。

父組件是一個列表數據，在父組件中須要進行新增和修改，所以我將彈框封裝成了一個公共組件，以便於其餘列表頁進行調用，可是每一個列表頁顯示的html會有不一樣，固然咱們能夠經過數據判斷來顯示不一樣的html，固然咱們也能夠使用slot來解決這種問題，當業務過於複雜時，處理方式也各有不一樣。

這裏我把相關的業務場景測試圖貼出來
父組件

若是有任何關於本文的意見，歡迎在文章下方留言，我會在看到的第一時間回覆。