VUE（子传父）$refs的方式

最新推荐文章于 2025-03-21 19:58:31 发布

Congnandaobei

最新推荐文章于 2025-03-21 19:58:31 发布

阅读量1.1k

点赞数 1

分类专栏： VUE 文章标签：子传父$refs方式

本文链接：https://blog.youkuaiyun.com/Congnandaobei/article/details/93136143

版权

VUE 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件通信-父子通信-$refs</title>
    <style>
        .com-a {
            padding: 5px;
            border: 1px solid #000;
        }
    </style>
    <!--
        子传父：EventsUp
        首先：父组件可以通过$refs的方式直接访问子组件
        尽量只是访问其中的数据，不建议不要去修改里面的数据
        容器造成数据管理滚乱，难以维护
    -->
</head>

<body>
<div id="app">
    <com-a ref="coma">
    </com-a>
    <br>
    <button @click="handleClick">点击访问</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    //我是子元素，我要把数据给父元素
    Vue.component('com-a',{
        template:`
        <div class="com-a">
          <p>com-a 组件</p>
          <p>{{ message }}</p>
        </div>
        `,
        data(){
            return {
                message:'com-a message'
            }
        },
        methods:{
            hello(){
                console.log('hello com-a')
            }
        }
    })
    //实例vue我是父元素
    const app  = new Vue({
        el:'#app',
        data:{},
        methods:{
            handleClick(){
                // 相当于 document.getElementById，获取所有 ref 声明的子组件
                // console.log(this.$refs['coma'])//这个就是得到子组件com-a里面的内容
                // console.log(this.$refs.coma)//这个就是得到子组件com-a里面的内容,和上面一样，只不过换了一种方式
                //获取里面的具体数据
                const dai = this.$refs['coma']
                console.log(dai.message)//com-a message,这个数据就是子组件的内容啊
                //修改里面的内容，并调用函数看看返回内容(修改和调用没关系，只是写一起了)
                dai.message = 'daijie'//修改这个内容
                dai.hello()//调用里面的函数，看看给的结果
            }
        }
    })
</script>
</body>

</html>