vue ref的使用

1、给标签设置ref属性

<h2 ref='midautumn'>中秋快乐111</h2>

2、在mounted()中使用$refs对获取到的标签使用（methods与data等平级）

mounted(){
            //打印出所有带ref属性的值，是一个对象，{midautumn: h2, mid-autumn: h3, son2: VueComponent}
            console.log(this.$refs);

            // 打印出名ref属性为midautumn的标签h2
            console.log(this.$refs.midautumn);//h2

            // ref属性为mid-autumn的标签h3
            console.log(this.$refs['mid-autumn']);

            // 使用$refs将h2颜色改为red
            this.$refs.midautumn.style.color = 'red';

            // js可以获取子组件渲染后的内容<div id='son2'>...</div>
            console.log(document.getElementById('son2'));

            // refs获取子组件son2 VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
            console.log(this.$refs.son2);

            // refs获取子组件中data数据msg
            console.log(this.$refs.son2.msg);

            // refs获取子组件中methods方法
            console.log(this.$refs.son2.log1());
        }

3、ref与js获取id的区别：

ref可以获取子组件中所有内容

id只能获取渲染后的标签

示例：

<!DOCTYPE html>
<html>
<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id='app'>
        <h2 ref='midautumn'>中秋快乐111</h2>
        <h3 ref='mid-autumn'>中秋快乐222</h3>
        <son id="son2" ref='son2'></son>
    </div>

    <template id="son">
        <div>放假还得写作业，一点不快乐<br>
            {{msg}}
        </div>
    </template>

    <script>
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        components:{
            son:{
                template:'#son',
                data(){
                    return{
                        msg:'我不是真正的快乐'
                    }
                },
                methods:{
                    log1(){
                        return 111
                    }
                }
            }
        },
        mounted(){
            //打印出所有带ref属性的值，是一个对象，{midautumn: h2, mid-autumn: h3, son2: VueComponent}
            console.log(this.$refs);

            // 打印出名ref属性为midautumn的标签h2
            console.log(this.$refs.midautumn);//h2

            // ref属性为mid-autumn的标签h3
            console.log(this.$refs['mid-autumn']);

            // 使用$refs将h2颜色改为red
            this.$refs.midautumn.style.color = 'red';

            // js可以获取子组件渲染后的内容<div id='son2'>...</div>
            console.log(document.getElementById('son2'));

            // refs获取子组件son2 VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
            console.log(this.$refs.son2);

            // refs获取子组件中data数据msg
            console.log(this.$refs.son2.msg);

            // refs获取子组件中methods方法
            console.log(this.$refs.son2.log1());
        }
    })
    </script>
</body>
</html>

打印结果：

　　1、浏览器

 

 　　2、console控制台

 

 

　　

 

posted @ 2021-09-20 11:38  从入门到入土  阅读(2288)  评论(0)    收藏  举报