组件使用中的细节点
- 因为浏览器的规范,所以有些自定义组件在解析时会出现问题,这时候就需要使用 is 标签来解决
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
Vue.component('row', {
template: '<tr><td>this is content</td></tr>'
})
- 子组件的 data 定义要求必须是一个函数,目的是为了让每个子组件都拥有一个独立的数据存储,这样子组件不会互相影响
Vue.component('row', {
data: function() {
return {
content: 'this is content'
}
},
template: '<tr><td>{{content}}</td></tr>'
})
- 有些时候我们不得不操作 DOM 这时候就需要使用 ref 来解决问题了
<counter ref="one" @change="handleChange"></counter> //绑定一个ref
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div> //求和
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() { //通过ref来获取组件中的数据
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
父子组件传值
单向数据流,父组件可以随意向子组件传递参数,但子组件不可以修改传递过来的参数。这样做的原因是考虑到接受的数据可能还被其他子组件使用,会对其他组件造成影响。所以在子组件中我们要把父组件传过来的值复制一份,这样我们就可以随意的进行操作了
<counter :count="3" @change="handleIncrease"></counter>
<counter :count="2" @change="handleIncrease"></counter>
<div>{{total}}</div>
var counter = {
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number++
this.$emit('change', 1)
}
}
}
var vm = new Vue({
el: '#root',
data: {
total: 5
},
components: {
counter: counter
},
methods: {
handleIncrease: function(step) {
this.total += step
}
}
})