<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--<table>-->
<!--<tbody>-->
<!--<tr is="row"></tr>-->
<!--<tr is="row"></tr>-->
<!--<tr is="row"></tr>-->
<!--</tbody>-->
<!--</table>-->
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
// Vue.component('row',{
// data:function () {
// return {
// content:'this is content'
// }
// },
// template:'<tr><td>{{content}}</td></tr>'
// })
Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data:function () {
return {
number:0
}
},
methods:{
handleClick:function () {
this.number++;
this.$emit('change')
}
}
});
var vm = new Vue({
el:'#root',
data:{
total:0
},
methods:{
handleChange:function () {
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
</body>
</html>
<!--
1.tbody中需要用到自定义组件；不能直接用自定义的标签名，需要用到is属性，例如<tr is='row'></tr>
这样就符合h5规范，程序也不会有bug
同理在<ul></ul> <select></select>标签中也是一样
2.在非根组件既子组件定义data中，不能将data定义成的对象，data后面必须跟着函数，同时函数必须返回一个对象
3.ref当写在div这样标签中，通过this.$refs.变量名，获得标签DOM元素
当在一个组件上写ref，通过this.refs.[name],获得是子组件的引用（重点）
-->