Vue-组件使用细节

一、用is指定组件为特定的原生HTML元素。

html:

  <div id="app">
    <table>
      <tbody>
        <item></item>
        <item></item>
      </tbody>
    </table>
  </div>

js:

Vue.component('item',{
  template:"<tr> <td>I am a td</td> </tr>"
})
var app=new Vue({
    el:'#app',
})

浏览器中检查元素：

为什么会出现这种bug呢？

　　像 <ul>、<ol>、<table>、<select> 里只允许包含指定的元素，像 <option> 这样的元素只能出现在某些特定元素的内部；当模板标签使用在这些有限制性的元素中时，载入前组件还未解析，当前元素发现非指定元素会有排斥反应。

解决办法：

　　用is指定限制组件为特定的原生html标签。

<div id="app">
    <table>
      <tbody>
        <tr is='item'></tr>
        <tr is='item'></tr>
      </tbody>
    </table>
</div>

浏览器中检查元素：

二、子组件的data必须是函数，不能是对象。

　　因为自组件可能被调用多次，每个子组件的data都应该是相互独立的。

data是对象时：

Vue.component('item',{
  data:{
      content:'I am a td'
  },
  template:"<tr> <td>{{content}}</td> </tr>"
})

控制台报错：

改data是函数即可：

Vue.component('item',{
  data:function(){
    return {
      content:'I am a td'
    }
  },
  template:"<tr> <td>{{content}}</td> </tr>"
})

 

三、refs

普通元素是上 设置ref 属性，通过this.$refs.name获取的是dom节点。
组件上设置ref 属性，通过this.$refs.name获取的是组件的引用。