基本用法

ref 有三種用法：

1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素

2、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可以使用組件的所有方法。

3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點

第1，2種情況　

this.$refs 獲取了所有設(shè)置ref屬性的元素（如有重名那么會被覆蓋）　　

如果是普通的元素那返回的是一個普通的dom,如果ref放在vue組件里，那么返回的是一個vue對象，這個對象包含了這個組件的各種信息

第3種情況

如圖所示這樣使用

this.$refs.g1 獲取得是vue組件對象的集合，就不覆蓋了

$attrs

父子之間值傳遞，我們一般用的是在屬性里設(shè)置，采用:prop="prop"的格式

在子級的props定義接受，然后可以直接使用，

若props里沒有定義，那么可以使用this.$attrs里獲取沒有定義的值，

如下圖

圖中定義了3個屬性（v-model也是個特殊的屬性，在props中可以用 value來接收）

那$attrs的值是什么呢？

是除了props里已經(jīng)定義接收了的傳值， 就剩下了grand-id這個屬性

如果還有孫子級的組件， 我們還可以用

v-bind="$attrs"

這種方式再次傳遞到孫子級的頁面，孫子級仍然可以使用props來獲取。如果不使用props，那么還可以依舊使用this.$attrs來獲取，

這個相當于搭了個橋，

如上圖所示，this.attrs里面為grandId:1,我們使用v−bind="this.attrs里面為{grandId:1}, 我們使用v-bind="this.attrs里面為grandId:1,我們使用v−bind="this.attrs" 同等于 v-bind:grandId=“1”.這是只有一個屬性值，所以差別不大，如果有多個屬性值，那就不需要我們寫了。直接借你一用，把各個需要傳遞給子孫級的數(shù)據(jù)，直接傳到了目的地

語法糖的問題

在看同事代碼的時候，發(fā)現(xiàn)在改變子級元素的值的時候，直接去改變了父級的值。沒有用vuex，沒有用emit。

其實還是用了emit，只是一些語法糖

v-model

如上面所展示代碼

用v-model綁定了元素，在子級里面props接收到了value的值。

用該值初始化了inputValue，并監(jiān)聽emit了一個input事件。

在第一幅圖里 v-model里綁定的值，也跟著改變了。

相當于

還是相當于在父級上綁上了一個事件，只是為了簡單寫法，省略一些東西

.sync

普通屬性呢？其實也有一種簡單的寫法。

<template>
  <div class="dashboard-container">
    {{ object }}
    <text1 v-model="object.v" :changep.sync="object.p" />
  </div>
</template>

<script>

import text1 from './text'

export default {
  components: {
    text1
  },
  data() {
    return {
      object: {
        v: 1,
        p: 2
      }

    }
  }
}
</script>

<!--
 * @Author: hanker
 * @LastEditors: hanker
 * @Description:
-->
<template>
  <div class="">
    <el-input v-model="inputValue" />
    <el-button @click="clickHandle">點擊改變p</el-button>
  </div>
</template>

<script>
// import x from ''
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      inputValue: this.value
    }
  },
  computed: {

  },
  watch: {
    inputValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {

  },
  methods: {
    clickHandle() {
      const p = '改變了對應(yīng)的p'
      this.$emit('update:changep', p)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()

</style>

在看一些vue開源的后臺管理系統(tǒng)的時候，常?？吹竭@些快捷寫法，大家不要慌。百度一下，完事大吉

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論