正文
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获取的是组件的引用。
组件上设置ref 属性，通过this.$refs.name获取的是组件的引用。
