vue-------特殊屬性

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>