vuejs组件使用注意点

1、table tbody里面的标签如果不是tr，直接使用组件会被编译到标签外，所以用is=‘组件名’来放到规定的标签里

<table>
 <tbody>
         <tr is="row"> </tr>
         <tr is="row"> </tr>
</tbody>
</table>
<script>
      Vue.component('row',{
        template: '<tr><td>this is a row </td></tr>'
      })
</script>

2、子组件修改父组件的data里面的数据

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

这里注意我们的事件名称被换成了update:age
update：是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

3、vuejs父子间传值并计算的代码（包含父向子传值props，子利用.sync属性改变父中data的值，计算方法computed）

<div id="root">
        <counter :count.sync="json.a" ></counter>
        <counter :count.sync="json.b" ></counter>
        <div>{{total}}</div>
    </div>

    <script>

        var counter = {
            props: ['count'],
            data: function() {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function() {
                    // this.count = 11
                    this.number = this.number + 2
                    let data ={
                        a: 2,
                        b:4
                    }
                                        //正常情况$emit是子向父传值的方法，
                                        //this.$emit(‘change’,2) //子向父传递一个‘change’事件，并带一个参数过去，父组件获取这个事件并接收参数，就完成子向父传值了
                    this.$emit("update:count",this.number)
                }
            }
        }

        var vm = new Vue({
            el: '#root',
            data: {
                json: {
                    a:1,
                    b:2
                }
            },
            components: {
                counter: counter
            },
            computed:{
                total : function(){
                    return this.json.a +  this.json.b
                }
            }
        })
    </script>

4、组件绑定原生事件 @click.native = '方法名'
用途：子组件上的click事件，只能在子组件的methods中定义方法。绑定原生事件后，子组件上的click事件就能使用父组件上的方法了

<div id="root">
        <child @click.native="handleClick"></child>
    </div>

    <script>

        Vue.component('child', {
            template: '<div>Child</div>',
        })

        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    alert('click')
                }
            }
        })
    </script>