vue操作dom(以实现一个加法器为例子)

谁借莪１个温暖的怀抱￠ 2023-06-02 13:55 32阅读 0赞

话不多说,先上效果与完整代码:

效果:

有两个数字,点击其中任意一个加一,第三个数字是前两个数字的和.  
![在这里插入图片描述][20191004234829537.png]  
完整代码:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>计数器</title>
        <script src="./vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <counter ref="one" @change="changeHandler"></counter>
            <counter ref="two" @change="changeHandler"></counter>
            <div>{
       {sum}}</div>
        </div>
        <script> Vue.component('counter', { data: function () { return { number: 0, }; }, template: "<div @click='clickHandler'>{ {number}}</div>", methods: { clickHandler() { this.number++; this.$emit('change'); } } }); var app = new Vue({ el: "#app", data: { sum: 0, }, methods: { changeHandler: function () { this.sum = this.$refs.one.number + this.$refs.two.number; } } }); </script>
    </body>
    
    </html>

## 一.构建计数器组件 ##

Vue.component('counter', { 
                data: function () { 
                    return { 
                        number: 0,
                    };
                },
                template: "<div @click='clickHandler'>{ {number}}</div>",
                methods: { 
                    clickHandler() { 
                        this.number++;
                        this.$emit('change');
                    }
                }
            });

我们的这段代码就要就是点击数字后加1,并且发送`change`事件通知给父组件.

这里要注意:

1.  在子组件中的`data`不能跟父组件中直接是键值对的形式,`data`对应的是个函数.
2.  还有一点,虽然这里没用到(如果用父子组件传值的方式要用到),但是要记住,当父组件给子组件传值后,不要直接在子组件中改变它,因为可能其它的子组件也可能会用到这个值.正确的做法应该是在子组件中创建一个本地的变量,并把父组件传递的值赋给它(简单的来说就是在子组件中创建父组件传递来的值的副本)  
    举例:父组件传递一个value,子组件不要直接改变这个value,而是要创建变量number=value,然后去改变这个number的值

Vue.component('counter', { 
                props:['value'],
                data: function () { 
                    return { 
                        number: this.value,
                    };
                },
                template: "<div @click='clickHandler'>{ {number}}</div>",
                methods: { 
                    clickHandler() { 
                        this.number++;
                        this.$emit('change',this.number);
                    }
                }
            });

## 二.父组件中接受到子组件发送的事件,计算和 ##

1.  首先父组件中定义一个sum,用来存储和.(与子组件不同,父组件的data可以直接是键值对的形式)
2.  `@change="changeHandler"` .父组件监听子组件发送的`change`事件,并进入`changeHandler`方法.
3.  我们怎么拿到前面两个子组件中的number值呢???这就是本篇博客的重点了!!!  
    ⭐️**vue如何操作dom???**⭐️  
    ⭐️**使用`ref`关键字**⭐️
    
    1.首先我们在两个子组件上指定不同的`ref`进行区分  
    `<counter ref="one" @change="changeHandler"></counter>`  
    `<counter ref="two" @change="changeHandler"></counter>`
    
    2.通过`this.$refs.你指定的ref名字`来获取到dom节点  
    `this.sum = this.$refs.one.number + this.$refs.two.number;`

其实我们也完全可以不操作dom节点实现加法器,直接在父子组件通信时传值也行,可以自行实现,可参考博客  
[vue父子组件通信][vue]

[20191004234829537.png]: /images/20230601/fa0afa654b2d4ebe85fcede7246aea87.png
[vue]: https://blog.csdn.net/qq_45453266/article/details/102030741