vue $refs

Vue中使用$refs引用子组件

最新推荐文章于 2023-01-25 17:37:33 发布

原创最新推荐文章于 2023-01-25 17:37:33 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

独学而无友，则孤陋寡闻。q群582951247

vue 专栏收录该内容

106 篇文章

订阅专栏

本文介绍Vue中如何利用$refs特性访问子组件和DOM元素，通过示例展示了如何在父组件中引用并操作子组件实例。

官方地址：vm.$refs

类型：Object
只读
详细：

一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例。
参考：
- 子组件引用
- 特殊特性 - ref
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>Title</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.2em;
        }
        .component div {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component ref="com1" :parent-msg="msg"></my-component>
    <my-component2 ref="com2"></my-component2>
    <my-component3 ref="com3"></my-component3>
    <hr>
    <div>{{msg}}</div>
</div>
<script type="text/x-template" id="my-component">
    <div class="component">
        <div> ParentMsg: {{ parentMsg }} </div>
        <div> ChildMsg: {{ msg }} </div>
    </div>
</script>
<script>
    Vue.component('my-component2', {
        template: '<div>{{ msg }}</div>',
        data() {
            return {
                msg: 'Hi COMP2'
            }
        }
    });
    Vue.component('my-component3', {
        template: '<div>{{ msg }}</div>',
        data() {
            return {
                msg: 'Hi COMP3'
            }
        }
    });
    //register
    Vue.component('my-component',{
        props:['parentMsg'],
        template:'#my-component',
        mounted(){
            console.log("$parent:",this.$parent.msg);
            window.setTimeout(()=>{
                this.$parent.msg='Hello!';
            },3000);
        },
        data:function () {
            return{
                msg:'Msg of Child！'
            }
        }
    });
    // a root instance
    new Vue({
        el:"#app",
        data:{
            msg:'Msg of Parent!'
        },
        mounted(){
            console.log('$children1:',this.$refs.com1.msg);
            console.log('$children2:',this.$refs.com2.msg);
            console.log('$children3:',this.$refs.com3.msg);
        }
    });

</script>
</body>
</html>