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，从而得到两个子组件数字之和。