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>
