vue.js data上的数据和props上的数据的区别：

最新推荐文章于 2024-03-16 00:33:36 发布

webshitian

最新推荐文章于 2024-03-16 00:33:36 发布

阅读量1k

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42943107/article/details/101574945

版权

vue.js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这篇文章主要是解释上一篇文章 组件传值之父组件向子组件传值中props数据的一些特点。
组件传值之父组件向子组件传值的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--这是里vm控制的显示区域-->
        <!--父组件，可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要
        传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用-->
        <!--把msg中的值通过自定义的属性parentmsg传递到子组件的内部去-->
        <child v-bind:parentmsg="msg"></child>
    </div>
    
    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'这是一个父组件中的数据'
            },
            methods:{},

            //创建一个子组件
            components:{
                //结论：经过演示，发现，子组件，默认无法访问到父组件中的data上的数据和methods中的方法
                child:{
                    data(){
                        return{
                            name:"tom",
                            gender:"男"
                        }
                    },
                    template:`<p>这是一个子组件{{parentmsg}}</p>`,
                    //把父组件传递过来的parentmsg属性，先在props数组中，定义一下，
                    //也就是通过props定义需要接收的数据。
                    props:['parentmsg']
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
从例子中，我们可以看到，子组件中data也有数据，那么data里的数据又是从哪里来的？
子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，
比如：子组件通过ajax,请求回来的数据，都可以放到data身上。

测试props上的数据是否可以重新赋值？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--这是里vm控制的显示区域-->
        <!--父组件，可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要
        传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用-->
        <!--把msg中的值通过自定义的属性parentmsg传递到子组件的内部去-->
        <child v-bind:parentmsg="msg"></child>
    </div>
    
    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'这是一个父组件中的数据'
            },
            methods:{},

            //创建一个子组件
            components:{
                //结论：经过演示，发现，子组件，默认无法访问到父组件中的data上的数据和methods中的方法
                child:{
                    data(){
                        return{
                            name:"tom",
                            gender:"男"
                        }
                    },
                    template:`<p @click="change">这是一个子组件{{parentmsg}}</p>`,
                    //把父组件传递过来的parentmsg属性，先在props数组中，定义一下，
                    //也就是通过props定义需要接收的数据。
                    props:['parentmsg'],
                    methods:{
                        change(){
                            this.parentmsg = "已经修改"
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

运行结果:
在这里插入图片描述

定义在props里的数据，只要被定义了，就无法被重写，如果你想要修改props里的数据，建议使用data进行定义，在显示的结果虽然可以修改，但是vue报警告了。

然后，我们再来看一个，修改data数据的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input  v-model="username">
        <p>这里是data里面的数据:<span>{{username}}<span></p>
        
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               username:"小明"
               
            }
        });

    </script>
</body>
</html>

运行代码
提出疑问：我们尝试来改动一下data里面的值看看是否可以边变，是否会报错。
在这里插入图片描述

很明显，我们可以看出，data里的值可以改变，而且不会报错。

通过这两个例子，我们可以得出以下结论：
data上的数据和props上的数据的区别：
1.data上的数据都是可读可写的，
2.props上的数据只可以读的，无法重新赋值

webshitian

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue.js data上的数据和props上的数据的区别：

这篇文章主要是解释上一篇文章组件传值之父组件向子组件传值中props数据的一些特点。组件传值之父组件向子组件传值的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
复制链接

扫一扫