vue----03
Posted my-rw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue----03相关的知识，希望对你有一定的参考价值。
1、组件使用中的细节点
1.1 使用is解决某些情况下显示错误问题
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component(‘row‘,{
template: ‘<tr><td>this is a row</td></tr>‘
})
var vm = new Vue({
el:"#root",
data: {
},
methods: {
}
})
</script>
2、
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component(‘row‘,{
data: function() {
return{
content: ‘this is a row‘
}
}
template: ‘<tr><td>{{content}}</td></tr>‘
})
var vm = new Vue({
el:"#root",
data: {
},
methods: {
}
})
</script>
3、ref 的使用
<div id="root">
<counter ref="ont" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component(‘counter‘,{
template: ‘<div @click="handleClick">{{number}}</div>‘,
data: function() {
return{
number: 0
}
},
methods: {
heandleClick: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>
以上是关于vue----03的主要内容，如果未能解决你的问题，请参考以下文章