vue api強化學習之-------特殊屬性
vue api 特殊屬性
- is
長用於構建動態組件且基於 DOM 內模板的限制
- slot
插槽,推薦使用2.6.0新出的v-slot
用於標記往哪個具名插槽中插入子組件內容。
- scope
被 2.5.0 新增的 slot-scope 取代。推薦 2.6.0 新增的 v-slot
用於表示一個作爲帶作用域的插槽的 <template> 元素,它在 2.5.0+ 中被 slot-scope 替代
用於將元素或組件表示爲作用域插槽
- ref
ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例
- key
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes
- slot-scope
推薦使用2.6.0新出的v-slot
用於將元素或組件表示爲作用域插槽
父組件specialAttr.vue
<template>
<div class="hello">
<!-- v-for循環中通常使用key屬性,標明每個元素的唯一性,利於虛擬dom算法 -->
<div >
<div v-for="item of data" :key="item">{{item}}</div>
</div>
<!-- 構建動態組件 -->
<div :is="currentComp"></div>
<button v-on:click="changeComponent">改變組件</button>
<!-- 插槽 -->
<index >
<!-- 將插槽名爲inex的內容傳遞到子組件名爲index的插槽中 -->
<div slot="index">在index中的slot中顯示</div>
</index>
</div>
</template>
<script>
import Vue from 'vue'
import login from '../components/login.vue'
import index from '../components/index.vue'
export default {
name: 'SpecialAttr',
components:{
index,
login
},
data(){
return {
data:[1,2,3,4],
currentComp:index
}
},
methods:{
changeComponent(){
if(this.currentComp == login){
this.currentComp = index
}else {
this.currentComp = login
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
index.vue
<template>
<div class="hello">
<div v-color="'red'">
我是index 組件
</div>
<!-- 定義名爲index的插槽 -->
<slot name="index"></slot>
</div>
</template>
<script>
export default {
name: 'index',
directives:{
color:function(el,binding){
el.style.color = binding.value
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello div {
background: green;
width: 200px;
height: 100px;
}
</style>