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

最新推荐文章于 2024-01-28 21:17:33 发布

su_xiao_0707

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量6k

点赞数 2

分类专栏： vue-js 文章标签：子组件改变父级数据

本文链接：https://blog.csdn.net/qazwsx3322/article/details/66477202

版权

vue-js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

绑定数据的时候，传整个对象，当在子组件改变的时候，改变对象的一个属性，由于对象都是同一个引用，所以当子组件的数据改变之后，父组件也会改变
点击之前：这里写图片描述
点击之后：
**
小插曲->分割线

在刚开始写的时候，遇到一个小坑，只能怪自己没好好看文档
这里写图片描述
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名Prop-命名

在2和3处如果驼峰命名方式，在1处应该用相对应的 kebab-case (短横线隔开式) 命名，如果1处也用驼峰命名，数据传递不到子组件，并且没有任何报错.
如果23处命名为Child，则1处可命名为Child.

su_xiao_0707

关注

2
点赞
踩
1

收藏

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

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

扫一扫

专栏目录