vue ref小案例

这个小案例主要是复习发布订阅模式和ref的使用
目的是在页面上显示两个组件，每个组件被点击的时候给根组件的计算器加1，代码如下：

<body>
    <div id="app">
        <div>
            Component1:<counter @add-one="handleChange" ref="one" onselectstart="return false"></counter>
        </div>
        <div>
            Component2:<counter @add-one="handleChange" ref="two" onselectstart="return false"></counter>
        </div>
        <div>total: {
    
    {
    
    total}}</div>
    </div>

    <script>
        Vue.component('counter', {
    
    
            data() {
    
    
                return {
    
    
                    times: 0
                }
            },
            template: '<span @click="handleSpanClick"> {
    
    {times}}</span>',
            methods: {
    
    
                handleSpanClick() {
    
    
                    this.times ++
                    this.$emit('add-one')
                }
            }
        })
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                total: 0
            },
            methods: {
    
    
                handleChange() {
    
    
                    this.total = this.$refs.one.times + this.$refs.two.times
                }
            }
        });
    </script>
</body>

在这里插入图片描述
效果：

注意：
我们不能将handleChange函数作为一个计算属性来用，比如下面的代码见就是错误的：

会报错：

为什么会报错？因为计算属性中获取不到this.$refs。
我们要知道两点：

计算属性在created阶段之后mounted之前执行
$refs的项在mounted之后才存在。

所以要避免在计算属性中数用$refs，因为还不存在
vue文档也提到了这个：
在这里插入图片描述

猜你喜欢