Vue中ref属性获取DOM元素和组件引用

ref获取DOM元素
vue中获取DOM元素不建议用js直接操作DOM，使用ref可达到操作DOM的效果
写法：this.$refs.pr.innerText：其中pr指代ref的值，innerText为获取元素中的文本内容，如下：

<div id="app">
    <!-- 获取DOM元素 ,ref是英文单词reference的缩写-->
    <p id="p" ref="pr" @click="getElement">我家里有矿</p>
</div>

const vm = new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    getElement() {
                        //这种直接操作dom的方法获取元素,在vue是不提倡这样做的,当然你这样做了没人拦
                        console.log(document.getElementById("p").innerText)
                        //vue中提倡使用的方法
                        console.log(this.$refs.pr.innerText)
                    }
                },
                components:{
                    com
                }
            })

ref实现组件引用
在组件中使用该属性，可直接获取组件的私有方法和私有属性，
获取私有属性写法：this.$refs.com.msg,其中com指代ref的值，msg为组件中的私有属性
获取私有方法的写法：this.$refs.com.action(),其中com同上，action()代表私有方法，这里的括号不能去掉，去掉的话输出的内容为方法的引用

<div id="app">
    <!-- 通过ref进行组件引用 -->
    <com ref="com"></com>
</div>

<template id="tem">
    <div>
        <button @click="action">我就是一个子组件</button>
    </div>
</template>

            const com = {
                template:"#tem",
                data:function() {
                    return {
                        msg:'我是组件里的属性值'
                    }
                },
                methods:{
                    action(){
                        console.log("我是组件里的方法")
                    }
                }
            }
            const vm = new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    getElement() {
                        //获取组件里的值
                        console.log(this.$refs.com.msg)
                        //获取组件里的方法
                        console.log(this.$refs.com.action())
                    }
                },
                components:{
                    com
                }
            })

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 获取DOM元素 ,ref是英文单词reference的缩写-->
            <p id="p" ref="pr" @click="getElement">我家里有矿</p>
            <!-- 通过ref进行组件引用 -->
            <com ref="com"></com>
        </div>
        <template id="tem">
            <div>
                <button @click="action">我就是一个子组件</button>
            </div>
        </template>
        <script type="text/javascript">
            const com = {
                template:"#tem",
                data:function() {
                    return {
                        msg:'我是组件里的属性值'
                    }
                },
                methods:{
                    action(){
                        console.log("我是组件里的方法")
                    }
                }
            }
            const vm = new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    getElement() {
                        //这种直接操作dom的方法获取元素,在vue是不提倡这样做的,当然你这样做了没人拦
                        console.log(document.getElementById("p").innerText)
                        //vue中提倡使用的方法
                        console.log(this.$refs.pr.innerText)
                        //获取组件里的值
                        console.log(this.$refs.com.msg)
                        //获取组件里的方法
                        console.log(this.$refs.com.action())
                    }
                },
                components:{
                    com
                }
            })
        </script>
    </body>
</html>