Vue_组件使用的细节点

一.is 属性
解决模板标签使用出现bug的问题

tbody里面只能识别tr标签
如果我们在tbody里面引用组件，例如自定义一个tablerow

<table>
       <tbody>
         <tablerow></tablerow>
         <tablerow></tablerow>
         <tablerow></tablerow>
         <tablerow></tablerow>
       </tbody>
</table>

因为tbody不能识别除了tr以外的标签，所以会出现这种问题：
这里写图片描述
可能出现tr与tbody同级的问题，这是HTML5的标准，解决办法是：

<table>
       <tbody>
        <tr is='tablerow'></tr>
        <tr is='tablerow'></tr>
        <tr is='tablerow'></tr>
        <tr is='tablerow'></tr>
       </tbody>
</table>

使用is 这个属性,解决模板标签上使用出现bug的问题。

注意的是在某一些浏览器中，直接在ul中写组件也会出现问题。

<ul><li is ="row"></li></ul>

同理：<select><option is="row"></option></selcet>

二.在子组件中定义data
data不能定义为对象，必须为函数function，要求返回一个return函数返回数据
因为子组件可能会被调用多次，每一个子组件的数据时独立的，不能共享，通过函数返回一个对象的目的就是让没哟子组件拥有一个独立的数据存储。

三.ref
vue不建议我们操作DOM元素，但是在处理一些极其复杂的动画效果，还是需要操作DOM元素，那么在Vue中怎么操作DOM呢？

Vue给我们一个属性ref 绑定DOM元素，获取DOM元素
eg：

  <h1 ref="helloDom" @click="reffunction">你好我是ref！</h1>

在methods 中：

 reffunction:function(){
   console.log(this.$refs.helloDom)
 },

this.$refs.helloDom 可以指向ref=‘helloDom’的DOM指向的节点
这里写图片描述
然后就可以对元素操作了。这是ref在一个标签上，如果ref是在一个组件上呢？通过ref获取的是什么，是这个组件的引用。

Vue_组件使用的细节点

猜你喜欢