ref 的两种用法

1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。

案例1:ref 加在普通的元素上

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>

    <div id="app">
        <!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
        <div ref="mydiv1">今天天气不错,挺风和日丽的</div>
        <div ref="mydiv2">我们下午没有课</div>

        <input type="button" value="获取div的文本内容" v-on:click="getDivText" />
    </div>
    <script>

        var vm = new Vue({
            el: "#app",
            methods: {
                getDivText: function () {

                    //在Vue中我们可以通过this.$refs获取到所有添加了ref属性的元素(Vue不建议我们直接操作DOM,所以给了我们ref使用)
                    //既然拿到了所有添加了ref属性的元素,我们就可以根据ref的值来获取到指定的元素了

                    //这里是获取ref值为mydiv1的元素,然后拿到这个元素的innerText值。【this.$refs.mydiv1就是获取这个ref值为mydiv1的元素】
                    var textVal = this.$refs.mydiv1.innerText;
                    alert(textVal)

                    //这里是获取ref值为mydiv2的元素,然后拿到这个元素的innerText值
                    var textVal2 = this.$refs.mydiv2.innerText;
                    alert(textVal2)
                }
            }
        });
    </script>
</body>
</html>

如何查看Vue对象

案例2:ref 加在子组件上

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>

    <div id="app">
        <!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
        <mycom ref="mycomTemp"></mycom>
        <input type="button" value="调用mycom组件中的getDivText方法" v-on:click="getDivText" /> <!--在父组件中调用子组件中的方法-->

    </div>
    <template id="temp" >
        <div>
            <div ref="mydiv1">今天天气不错,挺风和日丽的</div>
            <div ref="mydiv2">我们下午没有课</div>
            <input type="button" value="获取div的文本内容" v-on:click="getDivText" /><!--子组件自己调用自己的方法-->
        </div>
        
    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                getDivText: function () {

                    //在Vue中我们可以通过this.$refs获取到所有添加了ref属性的组件(Vue不建议我们直接操作DOM,所以给了我们ref使用)
                    //既然拿到了所有添加了ref属性的组件,我们就可以根据ref的值来获取到指定的组件了

                    
                    //以下代码的意思如下:
                    //先拿到Vue下所有添加了ref属性的组件(即:this.$refs)
                    //然后获取ref值为mycomTemp的这个组件(即:this.$refs.mycomTemp)。
                    //再调用这个组件中的getDivText()方法(即:this.$refs.mycomTemp.getDivText())
                    var t = this.$refs.mycomTemp.getDivText(); //这个this是指Vue对象,this.$refs是指拿到Vue对象下的所有添加了ref属性的元素或组件
                }
            },
            components: {
                "mycom": {
                    template: "#temp",
                    methods: {
                        getDivText: function () {
                            var a = this.$refs.mydiv1.innerText; //这个this指的是mycom组件,this.$refs指的是拿到mycom组件中的所有添加了ref属性的元素,this.$refs.mydiv1指的是拿到mycom组件中ref值为mydiv1的元素
                            alert(a);                         
                        }
                    }
                }             
            }
            
        });
    </script>
</body>
</html>

利用ref 实现父组件向子组件传值

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>

    <div id="app">
        <!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
        <mycom ref="mycomTemp"></mycom>
        <input type="button" value="调用mycom组件中的getDivText方法" v-on:click="getDivText" /> <!--在父组件中调用子组件中的方法-->

    </div>
    <template id="temp">
        <div>
            <div ref="mydiv1">今天天气不错,挺风和日丽的</div>
            
        </div>

    </template>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "我叫凡凡"
            },
            methods: {
                getDivText: function () {

                    //在Vue中我们可以通过this.$refs获取到所有添加了ref属性的组件(Vue不建议我们直接操作DOM,所以给了我们ref使用)
                    //既然拿到了所有添加了ref属性的组件,我们就可以根据ref的值来获取到指定的组件了


                    //以下代码的意思如下:
                    //先拿到所有添加了ref属性的组件(即:this.$refs)
                    //然后获取ref值为mycomTemp的这个组件(即:this.$refs.mycomTemp)。
                    //再调用这个组件中的getDivText()方法(即:this.$refs.mycomTemp.getDivText())
                    var t = this.$refs.mycomTemp.getDivText(this.msg); //将data中的msg数据传递到 mycom组件中
                }
            },
            components: {
                "mycom": {
                    template: "#temp",
                    methods: {
                        getDivText: function (m) { //这里可以接受到调用者传递过来的参数
                            alert(m);
                            this.$refs.mydiv1.innerText = m; //拿到这个值我们可以做我们自己想做的事啦,比如重新给div赋值
                        }
                    }
                }
            }

        });
    </script>
</body>
</html>

Logo

前往低代码交流专区

更多推荐