组件使用中的细节点
2018-07-12 本文已影响3人
程序员同行者
is 属性
ref 引用
值组件内定义data
<!DOCTYPE html>
<html>
<head>
<title>组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<table>
<tbody>
<tr>
<!-- <counter></counter> -->
<!-- // 使用is属性解决页面上的小bug -->
<tr is="counter"></tr>
<tr is="counter"></tr>
</tr>
</tbody>
</table>
</div>
<div id='app-1' >
<item ref='one' @change='handleChange'></item>
<item ref='two' @change='handleChange'></item>
<div>{{total}}</div>
</div>
<script>
var counter = {
template: '<tr><td>this is row</td></tr>',
}
var vm = new Vue({
el:'#app',
components: {
counter: counter
},
})
// ref 计数器功能
Vue.component('item',{
template: '<div @click="handClick">{{number}}</div>',
data: function() {
return {
number: 0
}
},
methods: {
handClick: function() {
this.number ++
this.$emit('change')
}
}
})
var vm1 = new Vue({
el:'#app-1',
data: {
total:0
},
methods:{
handleChange: function() {
console.log(this.$refs.one.number,this.$refs.two.number)
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
</body>
</html>
