vue2 基础学习06 （Vue组件：使用组件的细节点）

一.使用is解决标签渲染中的小bug

1.如下代码，将表格中的组件化

运行结果图示

image

乍一看是对的，但是细心的小伙伴会发现，组件row明明是引用在tbody中，但是在运行之后会发现:

组件解析到外面去了 这是一个bug

2.解决方法：

上出现的原因是因为在html5中，tbody下必须为tr,如果是row就违背了html5的规范。

那么我们就这样写：

使用is

运行结果图示：

image

这时候会发现成功解析到tbody中了

3.其他可能会产生此bug的标签

• select
• ul
• ol
• 等等

---

二.组件中的data必须为function形式

因为根节点root只会被实例一次，而组件可能会多次调用，所以要用函数返回

 data: function(){
     return{
        msg:'balabala'
     }
 }

简写为：

 data(){
     return{
        msg:'balabala'
     }
 }

---

三.使用ref操作DOM

        

               hi
        
    

    

通过this.$refs.ref的属性名来获取dom元素

如果要获取里面的内容，则this.$refs.ref的属性名.innerHTML

点击之后：

image