Vue中ref属性的用法_vue router.js ref-CSDN博客

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/111187497

$refs属性：

	1.通过$refs属性获取到的对象是一个原生的DOM对象
	2.,Vue不提倡DOM操作
	3. ref属性可以用在标签上也可以用在组件上,获取组件的dom对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
    <div id="app">
        <input type="button" value="点击" @click="edit">
        <p id="txt" ref="met">我要吃饭了</p>
        <!-- 1.给要操作的对象绑定ref属性 -->
        <login ref="lg"></login>
    </div>

    <script>

        var login  = {
            template:'<h1>这是login组件</h1>',
            data:function(){
                return{
                    key:'组件的data',
                }
            }
        }

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'我先去旅游',
            },
            methods:{
                edit:function(){
                console.log(this);
                this.$refs.met.innerHTML = '我是ref获取原生dom对象';
                //2.从$ref中获取绑定ref属性的值
                // ref属性可以用在标签上也可以用在组件上,获取组件的dom对象
                console.log(this.$refs.lg.key);
                // 获得组件里的值

                }
            },
            components:{
                login
            }
        })
    </script>
</body>
</html>

在这里插入图片描述