Vue-子组件改变父级组件的信息

最新推荐文章于 2023-05-19 17:21:18 发布

shenzhen_zsw

最新推荐文章于 2023-05-19 17:21:18 发布

阅读量263

点赞数

分类专栏：【VUE】

本文链接：https://blog.csdn.net/shenzhen_zsw/article/details/81128261

版权

【VUE】专栏收录该内容

68 篇文章 2 订阅

订阅专栏

概述

Vue-子组件改变父级组件的信息

在Vue2.0,已经不允许子组件给父组件赋值了，但是如果我们有这个需求应该怎么做呢，下面介绍一个方法，原理就是对象的引用

<body>
        <div id="box">      
            <h2>父组件=>{{ParData.a}}</h2>
            <child-com :Child="ParData"></child-com>
        </div>
        <template id="child">
            <div>
                <h3>子组件=>{{Child.a}}</h3>
                <button @click="change">点击</button>
            </div>

        </template>
    </body>
    <script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            ParData:{
                a:'我是父级的数据' 
            }
        },  
        components:{
            'child-com':{
                template:'#child',
                props:['Child'],
                methods:{
                    change(){
                        this.Child.a="已经被更改了"
                    },
                }
            }
        }
    })
    </script>

绑定数据的时候，传整个对象，当在子组件改变的时候，改变对象的一个属性，由于对象都是同一个引用，所以当子组件的数据改变之后，父组件也会改变

shenzhen_zsw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-子组件改变父级组件的信息

概述Vue-子组件改变父级组件的信息在Vue2.0,已经不允许子组件给父组件赋值了，但是如果我们有这个需求应该怎么做呢，下面介绍一个方法，原理就是对象的引用 &lt;body&gt; &lt;div id="box"&gt; &lt;h2&gt;父组件=&gt;{{ParData.a}}&lt;/h2&gt; ...
复制链接

扫一扫

专栏目录