欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue2.6插槽更新v-slot用法總結(jié)

 更新時間:2019年03月09日 09:13:07   作者:Mando  
在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié),具有一定的參考價值,感興趣的小伙伴們可以參考一下

在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。

引vue官方文檔

之前做項目時,對插槽理解太少了,這兩天學(xué)習(xí)時,才發(fā)現(xiàn)插槽更新用v-slot了,自己做了些簡單總結(jié),與大家分享一下~

插槽

我的理解就是父頁面在組件標(biāo)簽內(nèi)插入任意內(nèi)容,子組件內(nèi)插糟slot控制擺放位置(匿名插槽,具名插槽)

插槽分類

插槽一共就三大類
1.匿名插槽(也叫默認(rèn)插槽): 沒有命名,有且只有一個
2.具名插槽: 相對匿名插槽組件slot標(biāo)簽帶name命名的
3.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁面拿到(解決了數(shù)據(jù)只能從父頁面?zhèn)鬟f給子組件)

匿名插槽(也叫默認(rèn)插槽default)

用法:我的理解,匿名插糟只需要一個.(就是這些,不太復(fù)雜)

父頁面:

 <todo-list> 
    <template v-slot:default>
       任意內(nèi)容
       <p>我是匿名插槽 </p>
    </template>
</todo-list>  
//v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫

子組件 todoList.vue

<slot>我是默認(rèn)值</slot>
##顯示##
// 任意內(nèi)容
// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比較,就是必須起名todo對應(yīng),可以有多個具名插槽.(沒了~)

父頁面

 <todo-list> 
    <template v-slot:todo>
       任意內(nèi)容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 
// todo
data() {
   return {
    dynamicSlotName:"todo" 
   }

 },

子組件

<slot name="todo">我是默認(rèn)值</slot>
##顯示##
// 任意內(nèi)容
// 我是匿名插槽

對 v-slot:todo 做操作:

動態(tài)命名

v-slot:{dynamicSlotName}//替換標(biāo)簽上 v-slot:todo

具名插槽縮寫(匿名插槽用法)(可以后看)

#todo 替換標(biāo)簽上 v-slot:todo

匿名如果想用必須加上default

#default 替換標(biāo)簽上 v-slot:todo

父級模板里的所有內(nèi)容都是在父級作用域中編譯的;子模板里的所有內(nèi)容都是在子作用域中編譯的。

作用域插槽

1.重點是slotProps接取子組件里:user="user" :test="test"類似屬性的數(shù)據(jù)

父頁面

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以隨意命名
//slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"

子組件

 <slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默認(rèn)數(shù)據(jù)  v-slot:todo 當(dāng)父頁面沒有(="slotProps")
// 時顯示 Zhang


## 顯示 ##
// yue

解構(gòu)插槽Prop

父頁面 (子組件不變 顯示一樣)

// 相當(dāng)于
function (slotProps) {
 // 插槽內(nèi)容
}
(slotProps)=>參數(shù)可以用slot標(biāo)簽上現(xiàn)有的值({user,test})替換
<todo-list>
 <template v-slot:todo="{user,test}
" >
   {{user.firstName}}
 </template> 
</todo-list> 
## 顯示 ##
## // yue

參數(shù)值替換名字(可以后看)

<todo-list>
 <template v-slot:todo="{user:person,test}
" >
   {{person.firstName}}
 </template> 
</todo-list> 

// v-slot:[dynamicSlotName]="{user:person,test}
## 顯示 ##
## // yue

獨占默認(rèn)插槽縮寫(可以后看)
感覺沒什么機會用,限制條件太多

總結(jié)

在用上v-slot之后 只需要考慮好

1.是否需要命名(匿名插槽,具名插槽)
2.父頁面是否需要取存在子頁面的數(shù)據(jù)(作用域插槽)

todo-list實例

可以試一下,便于理解~

父頁面

<template>
  <div>
    新插槽 v-slot 代替具名插槽 作用于插槽
    <todo-list
    > 
    <template #todo="{todos:list}">
      <div @click = type(todos.id)>
         {{list.text}}
      </div>
        
    </template>
    </todo-list>  
  </div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
 name:"vSlot",
 components:{
  todoList
 },
 data() {
   return {

   }
 },
 methods: {
   type(data){
    console.log(data)
   }
 },
}
</script> 

子組件

<template>
  <ul class="slotTodoChildren">
    <li class="lis"
      v-for="todo in todoList"
      v-bind:key="todo.id"
    >
      <!--
      我們?yōu)槊總€ todo 準(zhǔn)備了一個插槽,
      將 `todo(todoList里的)` 對象作為一個插槽的 prop 傳入。
      -->
      <slot name="todo" :todos="todo">
      <!-- 后備內(nèi)容 -->
      {{ todo.text }}
      </slot>
    </li>
  </ul>
</template>
<script>
export default {
  name:"slotChildren",

  data() {
    return {
      todoList:[
      {
        id:1,      
        text:"掃地"
      },
      {
        id:2,
        text:"做飯"
      },
      {
        id:3,
        text:"擦桌子"
      }
    ]
    }
  },
  created(){
    console.log(this.filteredTodos)
  }
}
</script>
<style scoped>
.slotTodoChildren .lis{
  display: block;
  background: #434534;
  line-height:40px;
  margin-top: 10px;
  color: #fff;
  font-size: 24px;
  height: 40px;
}
</style>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue如何實現(xiàn)組件的源碼解析

    Vue如何實現(xiàn)組件的源碼解析

    本篇文章主要介紹了Vue如何實現(xiàn)組件的源碼解析,組件繼承分為兩大類,全局組件和局部組件,有興趣的可以了解一下
    2017-06-06
  • vue 動態(tài)綁定背景圖片的方法

    vue 動態(tài)綁定背景圖片的方法

    這篇文章主要介紹了vue 動態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標(biāo)簽添加背景圖片,需要的朋友參考下吧
    2018-08-08
  • Vue?2源碼解析ParseHTML函數(shù)HTML模板

    Vue?2源碼解析ParseHTML函數(shù)HTML模板

    這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue如何遍歷data所有變量并賦值

    vue如何遍歷data所有變量并賦值

    這篇文章主要介紹了vue如何遍歷data所有變量并賦值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue+element開發(fā)使用el-select不能回顯的處理方案

    vue+element開發(fā)使用el-select不能回顯的處理方案

    這篇文章主要介紹了vue+element開發(fā)使用el-select不能回顯的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue-element-admin下載到登錄的一些坑

    vue-element-admin下載到登錄的一些坑

    本文主要介紹了vue-element-admin下載到登錄的一些坑,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • vue中echarts自動輪播tooltip問題

    vue中echarts自動輪播tooltip問題

    這篇文章主要介紹了vue中echarts自動輪播tooltip問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue-element-admin配置小結(jié)

    vue-element-admin配置小結(jié)

    本文主要介紹了vue-element-admin配置小結(jié),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue el-checkbox實現(xiàn)全選單選方式

    vue el-checkbox實現(xiàn)全選單選方式

    這篇文章主要介紹了vue el-checkbox實現(xiàn)全選單選方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Element中Slider滑塊的具體使用

    Element中Slider滑塊的具體使用

    這篇文章主要介紹了Element中Slider滑塊的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評論