vue19-获取子组件引用 ref

男娘i 2022-05-10 01:44 276阅读 0赞

下面代码是一个计数器的功能，首先看下面代码：

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                <div ref="one" is="counter" @sumadd="handlerAdd"></div>
                <div ref="two" is="counter" @sumadd="handlerAdd"></div>
                <div>{
       {sum}}</div>
            </div>
    
    
            <script>
                Vue.component("counter",{
                    template:'<div @click="handlerClick">{
       {count}}</div>',
                    data: function(){
                        return {
                            count:0
                        }
                    },
                    methods:{
                        handlerClick: function(){
                            this.count++;
                            this.$emit("sumadd");
                        }
                    }
                })
    
                var vm = new Vue({
                   el:"#root",
                   data:{
                       sum:0
                   },
                   methods:{
                    handlerAdd: function(){
                        this.sum= this.$refs.one.count+this.$refs.two.count;
                    }
                   }
                
                })
    
            </script>
        </body>
    </html>

我们定义了一个组件counter，在html中两个div标签对组件做了引用，一个ref设置one,一个ref设置为two。

第三个div是上面两个div数字的和，我们做的效果就是上面两个div数字增加时，获取两个组件的值，显示到第三个div标签中。

（当ref在html标签上时，是对dom的引用，当ref在组件上时，是对组件的引用）

this.$refs.ref就是对组件的引用,我们拿到两个组件的count的和，赋值给父组件的sum.

![70][]

[70]: /images/20220510/e6a8e24f941d4c2bb5677a5a8cc9b3ac.png