深入理解vue组件

一、组件使用过程中的细节问题

1.使用 is 解决H5标签的小bug（用 is='组件名' 解决）

好处：这样的写法一方面可以使用组件，另一方面也符合H5的规范。

/*创建组件*/
Vue.component('row',{
    template:'<tr><td>this is a row</td></tr>';
});
/*vue实例接管#root*/
new Vue({
    el:'#root'
});

<div id='root'>
    <table>
        <tbody>
            <row></row> <!-- 如果直接写组件名字，源代码渲染中会出错，<tr>标签会成为table的兄弟元素，-->
            <tr is='row'></tr> <!--正确写法：正常写<tr>标签，然后 is='row'（组件名）-->
            <tr is='row'></tr>
          </tbody>
      </table>
</div>

2.在子组件中定义 data 时，data 必须是个有返回值的函数，不能向父组件中一样定义。

原因：子组件需要被网页中的元素多次使用，通过一个函数返回一个对象的目的，就是让每个子组件都拥有一个独立的数据存储，就不会出现多个子组件相互影响的问题。

Vue.component("row",{   //组件名row
    data:function(){  //函数
        return {          //有返回值
            content:'this is a row'
        }
    },
    template='<li>{{content}}</li>'   //模板
});

3.获取DOM节点（vue是面向数据的开发，极少操作DOM）

用法：

　　1.在标签中添加  ref='ref名字'    例如：ref='hello'

　　2.使用Vue内置属性获取，$.refs.ref名字  例如：$refs.hello

当写在div标签中：使用 this.$refs.hello 获取的是 DOM节点

当写在组件中：使用 this.$refs.hello 获取的是子组件的引用

<div ref='dv' @click='dvClick'> ref 可以获取DOM节点 </div>

new Vue({
    el:'root',
     methods:function(){
          dvClick:function(){
               console.log(this.$refs.dv);   //<div> ref 可以获取DOM节点</div>
          }
      }
}

4.案例：计数器

<div class="root">
    <row @change='sumChange' ref='num1'></row>  <!--第二步：监听子组件的触发事件，一旦触发事件，就执行sumClick方法-->
    <row @change='sumChange' ref='num2'></row>  <!--第二步：监听子组件的触发事件，一旦触发事件，就执行sumClick方法-->
    <div>{{total}}</div>
</div>

// 全局子组件
Vue.component('row', {
    data: function() {
        return {
            number: 0
        }
    },
    template: "<div @click='spanClick'>{{number}}</div>",
    methods: {
        spanClick: function() {
            this.number++;
            this.$emit("change"); //第一步：子组件向父组件触发一个名叫change的事件
        }
    }
});
// 实例组件
new Vue({
    el: '.root',
    data: {
        total: 0
    },
    methods: {
        sumChange: function() {
            //console.log(this.$refs.num1.number);//获取子组件中number的值
            this.total = this.$refs.num1.number + this.$refs.num2.number;
        }
    }
});