亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue作用域插槽怎么使用

發布時間:2022-11-01 10:16:52 來源:億速云 閱讀:146 作者:iii 欄目:開發技術

今天小編給大家分享一下Vue作用域插槽怎么使用的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

簡單的展示列表

現在我們做一個純展示用途的列表組件,如下圖所示:

Vue作用域插槽怎么使用

第一個例子先用slot來分發內容

<template>
 <div class="list">
  <div class="list-title">
   <slot name="title"></slot>
  </div>
  <div class="list-content">
   <slot name="content"></slot>
  </div>
 </div>
</template>

<script>
 export default {
  name: "MyList"
 }
</script>

在父組件中使用MyList

<template>
 <MyList>
  <span slot="title">title</span>
  <ul slot="content">
   <li v-for="item in listData">{{item}}</li>
  </ul>
 </MyList>
</template>

<script>
 import myList from './List.vue';
 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData: [
      '列表項1',
      '列表項2',
      '列表項3'
    ]
   }
  }
 }
</script>

滿足了基本的需求,但是作為組件的使用者,這樣的一個組件會讓我覺得非常麻煩,content中循環的邏輯還需要我自己動手來寫,這樣的使用毫無便利性。于是有了下面第二個版本

使用prop來傳遞數據

因為考慮到列表的內容總是一個數組,我把循環結構寫進了組件中

列表組件第二版:

<template>
 <div class="list">
  <div class="list-title">{{title}}</div>
  <ul class="list-content">
   <li v-for="(item ,index) in content" :key="index">{{item}}</li>
  </ul>
 </div>
</template>

<script>
 export default {
  name: "MyList",
  props: {
   title: {
    type: String,
    required: true
   },
   content: {
    type: Array,
    required: true
   }
  }
 }
</script>

使用起來也非常方便,只需通過prop將數據傳入組件中

<template>
 <div>
  <MyList title="標題1" :content="listData"></MyList>
  <MyList title="標題2" :content="newListData"></MyList>
 </div>
</template>

<script>
 import myList from './List.vue';
 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData: [
      '列表項1',
      '列表項2',
      '列表項3'
    ],
    newListData: [
      '新的列表項1',
      '新的列表項2',
      '新的列表項3'
    ],
   }
  }
 }
</script>

改進之后,每當我使用組件只需一行代碼,大大簡化了工作量

易用性的需求也滿足了,但現在又有了新的問題,組件的拓展性不好!每次只能生成相同結構的列表,一旦業務需求發生了變化,組件就不再適用了。比如我現在有了新的需求,在一個列表的每個列表項前加入了一個小logo,我總不可能又寫一個新的組件來適應需求的變化吧?假如需要更多的定制化場景呢?

作用域插槽

這里就有了第三版的列表組件,使用作用域插槽將子組件中的數據傳遞出去 

<template>
 <div class="list">
  <div class="list-title">{{title}}</div>
  <ul class="list-content">
   <li v-for="(item ,index) in content" :key="index">
    <!--這里將content中的每一項數據綁定到slot的item變量上,在父組件中可以獲取到item變量-->
    <slot :item="item">{{item}}</slot>
   </li>
  </ul>
 </div>
</template>

使用組件時,將業務所需的content模板傳入

<template>
 <div>
  <MyList title="標題1" :content="listData1"></MyList>
  <MyList title="標題2" :content="listData2">
   <template slot-scope="scope">
    <img :src="scope.item.img" width="20">
    <span>{{scope.item.text}}</span>
   </template>
  </MyList>
  <MyList title="標題3" :content="listData3">
   <template slot-scope="scope">
    <b>{{scope.item.prefix ? '有前綴' : '無前綴'}}</b>
    <span>{{scope.item.text}}</span>
    <span>{{scope.item.remark}}</span>
   </template>
  </MyList>
 </div>
</template>

<script>
 import myList from './List.vue';

 export default {
  name: 'HelloWorld',
  components: {
   'MyList': myList
  },
  data() {
   return {
    listData1: [
     '列表項1',
     '列表項2',
     '列表項3'
    ],
    listData2: [
     {text: '第二個列表的列表項1', img: 'example.png'},
     {text: '第二個列表的列表項2', img: 'example.png'},
     {text: '第二個列表的列表項3', img: 'example.png'}
    ],
    listData3: [
     {text: '第三個列表的列表項1', prefix: true, remark: '附加的備注1'},
     {text: '第三個列表的列表項2', prefix: false, remark: '附加的備注2'},
     {text: '第三個列表的列表項3', prefix: true, remark: '附加的備注3'}
    ],
   }
  }
 }
</script>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網頁中相應的地方,所以越來越多的前端開發者使用vue。

以上就是“Vue作用域插槽怎么使用”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

成武县| 满洲里市| 绵阳市| 山丹县| 肇东市| 昂仁县| 马关县| 固原市| 沛县| 彭州市| 和田市| 厦门市| 钟祥市| 电白县| 珠海市| 赤水市| 堆龙德庆县| 军事| 乐东| 天峻县| 南岸区| 浠水县| 长兴县| 屯留县| 怀柔区| 黔江区| 乌海市| 凤冈县| 探索| 盐亭县| 靖宇县| 高尔夫| 翁源县| 大港区| 诸城市| 阿坝| 郎溪县| 加查县| 保亭| 景宁| 康平县|