Vue 父子组件数据传递：解决单向数据流

最新推荐文章于 2023-09-23 15:00:00 发布

维生素ZZH

最新推荐文章于 2023-09-23 15:00:00 发布

阅读量702

点赞数

分类专栏： Vue #数据传递文章标签： Vue父子组件数据传递解决单向数据流 props

本文链接：https://blog.csdn.net/baidu_28443299/article/details/102822859

版权

Vue #数据传递专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父子组件数据传递：解决单向数据流

1.父传子组件数据传递

   我们可以使用props实现Vue父组件到子组件的数据传递。基础代码如下：

HTML代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<template id="thisfather">
    <div>
        <p>这是父组件的数据，名字：{{name}} 年龄：{{age}}</p>
        <son :sname="name" :sage="age"> </son>     //父组件数据绑定
    </div>
</template>
<template id="thisson">
    <div>
        <p>这是子组件的数据，名字：{{sname}} 年龄：{{sage}}</p> //绑定的父组件数据传递到子组件模板
    </div>
</template>
<div id="app">
<father></father>
</div>
</body>

JS代码如下：

<script>
    var app=new Vue({
        el:'#app',
        data:{
        },
        components:{
            'father':{
                template:'#thisfather',
                data:function () {
                    return {
                        name: 'Tom',     //父组件数据
                        age:30
                    }
                },
                components: {
                    'son':{
                        template: '#thisson',
                        data:function () {
                            return {    //子组件无数据
                            }
                        },
                        props:['sname','sage']   //通过props语句与父组件模板的:sname及:sage绑定；该语句位置在子组件模板中
                   },
                }
            }
        }
    })
</script>

运行结果如下：
父组件的数据传递给了子组件
但是上述的数据传递是单向的，即单向数据流，我们不能通过修改子组件的数据来改变父组件的数据。不过有两种方法可以让我们逆向改变数据，即解决单向数据流。

2.解决单向数据流

1.方法一：

代码如下：

<body>
<template id="thisfather">
    <div>
        <p>这是父组件的数据，名字：{{name}}</p>
        <son :sname.sync="name"> </son>     //渲染时需要：要更改的props数据.sync
    </div>
</template>
<template id="thisson">
    <div>
        <p>这是子组件的数据，名字：{{sname}}</p>
        <button @click="updatedata">更新数据</button>
    </div>
</template>
<div id="app">
<father></father>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
        },
        components:{
            'father':{
                template:'#thisfather',
                data:function () {
                    return {
                            name: 'Jack',
                    }
                },
                components: {
                    'son':{
                        template: '#thisson',
                        data:function () {
                            return {
                            }
                        },
                        props:['sname'],
                        methods:{
                            updatedata:function () {
                                this.$emit('update:sname','Tom')//以this.$emit
                                //("update:你要更改的props数据",改变后的值)这种方法
                                //修改数据，渲染时需要：要更改的props数据.sync
                            }
                        }
                    }
                }
            }
        }
    })
</script>
</body>

关键代码：

<son :sname.sync="name"> </son>     //渲染时需要：要更改的props数据.sync
updatedata:function () {
       this.$emit('update:sname','Tom')//以this.$emit("update:你要更改的props数据",改变后的值)这种方法修改数据，渲染时需要：要更改的props数据.sync
        }

通过以上两句代码来解决单向数据流，这种方法相对方法二较复杂，易出错，故常用方法二。

2.方法二：

代码如下：

<body>
<template id="thisfather">
    <div>
        <p>这是父组件的数据，名字：{{user.name}}</p>
        <son :suser="user"> </son>     //传递json对象
    </div>
</template>
<template id="thisson">
    <div>
        <p>这是子组件的数据，名字：{{suser.name}}</p>
        <button @click="updatedata">更新数据</button>
    </div>
</template>
<div id="app">
<father></father>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{

        },
        components:{
            'father':{
                template:'#thisfather',
                data:function () {
                    return {
                        user:{   //将需要改变的数据放到json数组里，然后以json对象的方式进行传递数据，就可以直接进行双向修改
                            name: 'Jack',
                        }
                    }
                },
                components: {
                    'son':{
                        template: '#thisson',
                        data:function () {
                            return {

                            }
                        },
                        props:['suser'],
                        methods:{
                            updatedata:function () {
                                this.suser.name='Tom'  //直接进行双向修改   这个方法最为常用
                            }
                        }
                    }
                }
            }
        }
    })
</script>
</body>

方法二只需将数据以Json数组的形式进行父子组件传递，便可解决单向问题，数据可双向修改。
运行结果如下：
在这里插入图片描述

维生素ZZH

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Vue 父子组件数据传递：解决单向数据流

父子组件数据传递：解决单向数据流1.父传子组件数据传递我们可以使用props实现Vue父组件到子组件的数据传递。基础代码如下：HTML代码如下：<head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/v...
复制链接

扫一扫