vue 組件使用中的細節點

一、is屬性

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對於哪些元素能夠出如今其內部是有嚴格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出如今其它某些特定的元素內部。

這會致使咱們使用這些有約束條件的元素時遇到一些問題。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

這個自定義組件 <blog-post-row> 會被做爲無效的內容提高到外部，並致使最終渲染結果出錯。幸虧這個特殊的 is 特性給了咱們一個變通的辦法：

<table>
  <tr is="blog-post-row"></tr>
</table>

須要注意的是若是咱們從如下來源使用模板的話，這條限制是不存在的：

• 字符串 (例如：template: '...')
• 單文件組件 (.vue)
• <script type="text/x-template">

其實簡單的來講，由於vue模板就是dom模板，使用的是瀏覽器原生的解析器進行解析，因此dom模板的限制也就成爲vue模板的限制了，要求vue模板是有效的HTML代碼片斷。可是因爲dom的一些html元素對放入它裏面的元素有限制，因此致使有些組件沒辦法放在一些標籤中，好比<ul></ul>  <select></select><a></a> <table></table>等等這些標籤中，因此須要增長is特性來擴展，從而達到能夠在這些受限制的html元素中使用。

 

二、子組件中data必須是函數

// 定義一個名爲 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

當咱們定義這個 <button-counter> 組件時，你可能會發現它的 data 並非像這樣直接提供一個對象：

data: {
  count: 0
}

取而代之的是，一個組件的 data 選項必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝：

data: function () {
  return {
    count: 0
  }
}

由於一個子組件可能被調用屢次，咱們不但願幾個子組件之間相互影響。每一個子組件都應該有本身的獨立數據。

 

三、ref引用

一、在html的標籤上使用時，是獲取這個標籤的dom元素

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
...

console.log(this.$refs.p) // <p>hello</p>

二、當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。

關於 ref 註冊時間的重要說明：由於 ref 自己是做爲渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，所以你不該該試圖用它在模板中作數據綁定。

儘管存在 prop 和事件，有的時候你仍可能須要在 JavaScript 裏直接訪問一個子組件。爲了達到這個目的，你能夠經過 ref 特性爲這個子組件賦予一個 ID 引用。例如：

<base-input ref="usernameInput"></base-input>
//如今在你已經定義了這個 ref 的組件裏，你可使用：
this.$refs.usernameInput

這裏會獲取子組件這個vue實例，而後能夠訪問這個實例的屬性，舉個例子，實現一個父組件統計子組件數字之和的功能

經過在子組件上定義兩個ref屬性，經過父組件能夠訪問到子組件的data，從而得到兩個子組件數字之和。