ref 的巧妙使用 ---关于在vue中操作dom的问题2

我们虽然使用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
}
}

})

转载于:https://my.oschina.net/u/3520255/blog/3025339

• 点赞
• 收藏
• 分享
• 文章举报