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>