使用vue如何通过父组件监听子组件数据变化，并触发相应函数？

发布于 2022-09-06 03:58:45 字数 1405 浏览 15 评论 0

如题，我想要在vue父组件中监听子组件的数据变化，当数据变化的时候，触发父组件相应的函数。
以下仅为示意代码，并非项目源码，根据项目实际情况，请勿使用 $emit以及vuex来实现通信

父组件:

<template>
    <div class="parent">
        <child-component ref="child"></child-component>
        <div class="tips">这里是父组件的数据:{{a}}</div>
    </div>
</template>

<script>
    import ChildComponent from "./ChildComponent.vue"
    export default{
        name: 'ParentComponent',
        computed:{
            a:{
               get(){
                   this.fn(this.$refs.child.a);
                   return this.$refs.child.a;
               } 
            }
        },
        methods:{
            fn(val){
                alert(val);
            }
        },
    }
</script>

子组件:

<template>
    <div class="child">
        <div class="btn" @click="add">+1</div>
        <div class="tips">这里是子组件的数据:{{a}}</div>
    </div>
</template>

<script>
    import ChildComponent from "./ChildComponent.vue"
    export default{
        name: 'ParentComponent',
        data(){
            return{
                a: 0
            }
        },
        methods:{
            add(){
                this.a ++;
            }
        },
    }
</script>

求各位支招解决，谢谢。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坏尐絯℡ 2022-09-13 03:58:45

通过父组件通过 props把数据传给子组件，子组件改变
父组件每次传一个对象给子组件, 对象之间引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    giveData:{
                        a:'我是父组件数据'
                    }
                },
                components:{
                    'child-com':{
                        props:['msg'],
                        template:'#child',
                        methods:{
                            change(){
                                //this.msg='被更改了'
                                this.msg.a='被改了';
                            }
                        }
                    }
                }
            });
        };
    </script>
</head>
<body>
    <template id="child">
        <div>
            <span>我是子组件</span>
            <input type="button" value="按钮" @click="change">
            <strong>{{msg.a}}</strong>
        </div>
    </template>

    <div id="box">
        父级: ->{{giveData.a}}
        <br>
        <child-com :msg="giveData"></child-com>
    </div>
</body>
</html>

回复收藏 0

錯遇了你 2022-09-13 03:58:45

= =你这个问题直接用官方的方式就能实现，你子组件自行监听自己的数据变化，然后$emit去调用父组件的方法就行了.
父组件在引用子组件时添加属性 @方法名A="父组件定义的方法" ，然后子组件中watch属性的变化，变化后执行 this.$emit('方法名A')，就可以出发"父组件定义的方法"
具体代码我就不贴了可以查看想官方文档的 emit和父子通信相关

回复收藏 0

~没有更多了~