1.is
<body>
<div id="app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template: "<tr><td>this is row</td></tr>"
})
var vm = new Vue({
el: '#app'
})
</script>
//什么情况呢，因为tbody下只能放tr，所以Vue的子组件row不会在tbody中。如下图：
所以呢，用is解决这个bug：
<tbody>
tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
除此之外，有的浏览器可能ul下只能放li、select下只能发option等等。
2.子组件的data属性
子组件（非根组件）中的data属性，应该是一个function函数，不能是对象，并且要求function函数返回一个对象，这个返回的对象就包含所对应的数据。
作用是为了让每一个子组件都拥有一个独立的数据存储
3.ref引用
虽然Vue不建议操作DOM。但是在处理一些极其复杂的功能，如动画操作时，必须对DOM进行操作。所以要采用ref引用的方式来获取操作DOM。
this.refs.ref
<div id="app">
<div ref="hello" @click="handleClick">aaa</div>
</div>
//这里是div，如果是个组件，那么ref得到的就是组件的引用
<script>
var vm = new Vue({
el: '#app',
methods: {
handleClick: function(){
console.log(this.$refs.hello)//console一个div
}
}
})
</script>
//两个子组件的和
<body>
<div id="app">
<contenter ref="con1" @change="changeClick"></contenter>
<contenter ref="con2" @change="changeClick"></contenter>
<div>{{total}}</div>
</div>
<script>
Vue.component('contenter',{
data: function(){
return {
number: 0
}
},
template: "<div @click='handleClick'>{{number}}</div>",
methods: {
handleClick: function(){
this.number++;
this.$emit('change');
}
}
})
var vm = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
changeClick: function(){
this.total=this.$refs.con1.number+this.$refs.con2.number;
}
}
})
</script>
</body>
8078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
