vue-------實例的屬性

vue api強化學習之-------實例的屬性

vue組件在構建的過程中，vue構建器給每個vue實例添加的屬性對象。

常用vue實例屬性

• vm.$refs

vue在構建過程中，將註冊過ref的所有dom元素和組件實例添加到一個對象中，並將此對象添加到當前vue實例的$refs屬性下。
$refs 只會在組件渲染完成之後生效，並且它們不是響應式的。這僅作爲一個用於直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs

• vm.$parent

當前vue實例若有父實例，則將父實例對象保存到當前實例的$parent屬性上。

• vm.$data

Vue 實例觀察的數據對象。Vue 實例代理了對其 data 對象屬性的訪問，所謂代理，簡單理解，就是把data中的每一個數據在vue實例對象中逐個保存一份

• vm.$props

當前組件接受到的props參數，vue實例代理了此對象，代理原理同$data

• vm.$el

獲取vue實例使用的根dom元素，即當前組件中template模板包含的根dom元素

• vm.$options

用於當前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處：

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

• vm.$slots

用來訪問被插槽分發的內容，根據具名插槽的名稱即可拿到被分發到此插槽的內容，沒有被命名的插槽，默認default,所有被分發的內容都被分發到default名下；

• vm.$children

一個當前組件實例的直接子組件實例的數組，

• vm.$root

當前組件樹的根 Vue 實例,通常就是我們的總入口組件實例。如果當前實例沒有父實例，此實例將會是其自己,

• vm.$listeners

類型：{ [key: string]: Function | Array }
父作用域中(不包括.native修飾符修飾的)v-on事件監聽器，是一種組件之間通信的方式， 通常使用v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用;

• vm.$attrs

包含了父作用域中不作爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用

• vm.$scopedSlots

用來訪問作用域插槽。對於包括 默認 slot 在內的每一個插槽，該對象都包含一個返回相應 VNode 的函數。vm.$scopedSlots 在使用渲染函數開發一個組件時特別有用

• vm.$isServer

當前 Vue 實例是否運行於服務器

實例屬性使用示例

• 父組件 instanceAttr.vue

<template>
  <div class="instance">
      <div>vue實例屬性api介紹</div>
      <div ref="divref">{{val}}</div>
      <login ref="loginref" :pra="val" @myevent="methods1" :val="val" :age="age" :job="job" >
          <div slot="loginslot">我是被插槽分發的東西</div>
      </login>
      <button @click="clickMethod">獲取$refs屬性</button>

  
   
  </div>
</template>

<script>
import login from '../components/login.vue'
import index from '../components/index.vue'
export default {
  name: 'InstanceAttr',
  data(){
      return {
         val:666,
         age:25,
         job:"java"
      }
  },
//   customOptions:{val:888}, 此處無用
  components:{
      index,
      login
  },
  methods:{
      clickMethod(){
          // 獲取dom元素的html內容
          var htmlcontent = this.$refs.divref.innerHTML;
          //獲取vue實例中的方法或數據
          var vueinstanceMethorData = this.$refs.loginref.login()


          console.log(htmlcontent,".........this.$refs,............",vueinstanceMethorData);
          
      },
      methods1(){alert('instanceAttr中的方法methods1被調用了')},
      methods2(){}
    
  },
  mounted(){
      // 獲取 vue實例監聽的數據對象，由於vue實例代理了此對象，因此，在組件中直接通過this.xx，就可訪問到data對象中的屬性
      console.log(this.$data.val,"......this.$data.val......");

      // 獲取當前組件的根元素
      console.log(this.$el,"...instanceAttr組件中....獲取根實例");

      // 如上定義的數據獲取不到
      console.log(this.$options,'..獲取初始化項....instanceAttr組件中....');

      // 當前實例中沒有分發到此處的內容，因此獲取不到內容
      console.log(this.$slots,"............instanceAttr組件。。。。。。this.$slots");

     //獲取當前組件實例的直接子組件實例對象，此處返回的是login組件實例
      console.log(this.$children[0].name,"......this.$children.....");

      // 獲取當前組件樹的根vue實例 此應用中就是app.vue對應的組件實例
      console.log(this.$root,"......this.$root......instanceAttr組件中....");

      // 此父作用域中沒有註冊事件監聽器，因此此處沒有監聽器函數
      console.log(this.$listeners,".this.$listeners.........instanceAttr組件中..");

     // 此父作用域中沒有屬性綁定傳遞，因此此處獲取不到
      console.log(this.$attrs,"this.$attrs............instanceAttr組件中......");

      // 沒有查到內容被分派到此組件，因此獲取不到
      console.log(this.$scopedSlots,"this.$scopedSlots............instanceAttr組件中......");

      //判斷當前實例是否運行與服務器端， 此處返回false,
      console.log(this.$isServer,".this.$isServer..................instanceAttr組件中.......")
  }  
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .divlistener{
        width: 100px;
        height: 50px;
        background: green;
        border: 1px solid red;

    }

</style>

• instanceAttr的子組件login.vue

<template>
  <div class="login base">
    <div>
    我是login 組件
    </div>
    <slot name="loginslot"></slot>
    <!-- 通過此方式將當前接受到的事件監聽器 傳遞到當前組件的子組件中去 -->
    <index v-on="$listeners" v-bind="$attrs"/>

  </div>
</template>

<script>
import index from './index.vue'
export default {
  name: 'login',
  components:{
    index
  },
  props:{
    // 接受pra，並定義接受規則
    pra:{
      type:Number,
      default:''
    },
    age:''

  },
  data(){
    return {
      name:'lgx',
    }
  },
  methods:{
    login(){
      console.log(this.name,"登錄了.................");
      // 子組件中由於沒有ref註冊過，因此$refs對象爲空對象
      console.log(this.$refs,"......子組件中.this.$refs....");
      // 獲取父實例對象
      console.log(this.$parent,"....子組件中父實例..此處應該是instanceAttr組件...........");

      // 獲取當前組件接受到的props參數
      console.log(this.$props.pra,"....this.$props.........")
    }
  },
  mounted(){
    // 獲取當前組件的根元素，並獲取根元素的屬性 和類名
      console.log(this.$el.attributes,"...login組件中....獲取根實例",this.$el.classList);
      
      // 此處能夠獲取到父組件被分發到此處的虛擬dom節點對象，此處可以獲取到分發到的內容，同時還可獲取到其上下文
      console.log(this.$slots.loginslot[0].elm,"............login組件。。。。。。this.$slots");
      
      // 獲取當前組件樹的根vue實例 此應用中就是app.vue對應的組件實例
      console.log(this.$root,"......this.$root......login組件中....");

      // 父作用域註冊了myevent事件,因此此處能拿到此事件監聽器函數
      console.log(this.$listeners,".this.$listeners.........login組件中..");

      // 當前組件接受了pra,age兩個參數，其餘的都會被$attrs屬性獲取到
      console.log(this.$attrs,"this.$attrs............login組件中......");
      //輸出 {val: 666,job: "java"} "this.$attrs............login組件中......"

      // this.$scopedSlots對象對應每個插槽返回一個函數，每個函數返回一個相應的虛擬dom節點
      console.log(this.$scopedSlots.loginslot(),"this.$scopedSlots............login組件中.......");
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello div {
    background:  green;
    width: 200px;
    height: 100px;
}
</style>

• login的子組件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
    }
  },

  mounted(){
    //   console.log("index組件。。。。。。。。mounted.......組件被掛載到dom之後");
    //   this.data.push('111');//報錯

    console.log(this.$listeners,"..............this.$listeners.......index組件中");

    // 當前組件接受了pra,age兩個參數，其餘的都會被$attrs屬性獲取到
    console.log(this.$attrs,"this.$attrs............index組件中......");
      
  },
 

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello div {
    background:  green;
    width: 200px;
    height: 100px;
}
</style>