我们虽然使用vue的时候是不会去操作它的dom的。但是有些情况下我们也不得不这么做, 那么我们应该如何处理这种情况呢? 我们使用 ref 去绑定到 div中,之后我们 通过 this.$refs (获取到 vue中 所有的引用) 但是如果我们是使用 自定义的子组件又该如何解决问题呢? 下面是一个 计时器的小例子讲述了实现的具体过程:
html:
<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
JS:
Vue.component('counter',{
// error temlpate
template: '<div @click="handleClick">{{number}}</div>',
// 注意点 子组件中的 data 的是函数还是对象
data: function() {
//number: 0 data functions should return an object:
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number ++
// 涉及到子组件 向父组件 传值的内容
// 你的子组件发生变化之后会触发 change事件,那我们在哪里实时监听呢?
this.$emit('change')
},
}
})
var vm = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleChange: function() {
// console.log('change');
// 这里我们用 ref 实际上是获取到了 counter组件的引用
// 此时我们拿到了 所需要的数字那么我们之后该怎么做呢?
console.log(this.$refs.one.number);
console.log(this.$refs.two.number);
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})