vue --- > 获取子组件数据的一个应急方案$refs

最新推荐文章于 2024-05-08 21:34:13 发布

栗子好好吃

最新推荐文章于 2024-05-08 21:34:13 发布

阅读量531

点赞数

分类专栏： Vue 文章标签：数据通信

Vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

使用$refs需要注意以下2点:
1.html方法使用子组件时,需使用ref = “xxx” 声明.
2.在父组件中使用,this.refs.xxx.msg 获取数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <my-component ref="comA"></my-component>
    <button @click="handleRef">ref获取子组件数据</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    
    
    Vue.component('my-component',{
        template:'<button @click="sendMessage">派发事件</button>',
        data:function(){
            return {
                msg:'来自子组件'
            }
        }
       
    })
    const app = new Vue({
        el:'#app',
        data:{
            message: ''
        },
        methods:{
            handleRef:function(){
                this.message = this.$refs.comA.msg
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述
参考《Vue.js实战》P82

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

栗子好好吃

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue --- > 获取子组件数据的一个应急方案$refs

使用$refs需要注意以下2点:1.html方法使用子组件时,需使用ref = “xxx” 声明.2.在父组件中使用,this.refs.xxx.msg 获取数据<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><div id=...
复制链接

扫一扫