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

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


<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>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="app">
        
        
        
        <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:`

这是一个子组件{{parentmsg}}

`
, //把父组件传递过来的parentmsg属性,先在props数组中,定义一下, //也就是通过props定义需要接收的数据。 props:['parentmsg'] } } });
script> body> html>

vue.js data上的数据和props上的数据的区别:_第1张图片
从例子中,我们可以看到,子组件中data也有数据,那么data里的数据又是从哪里来的?
子组件中的data数据,并不是通过 父组件传递过来的,而是子组件自身私有的,
比如:子组件通过ajax,请求回来的数据,都可以放到data身上。

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


<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>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="app">
        
        
        
        <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:`

这是一个子组件{{parentmsg}}

`
, //把父组件传递过来的parentmsg属性,先在props数组中,定义一下, //也就是通过props定义需要接收的数据。 props:['parentmsg'], methods:{ change(){ this.parentmsg = "已经修改" } } } } });
script> body> html>

运行结果:
vue.js data上的数据和props上的数据的区别:_第2张图片
vue.js data上的数据和props上的数据的区别:_第3张图片
定义在props里的数据,只要被定义了,就无法被重写,如果你想要修改props里的数据,建议使用data进行定义,在显示的结果虽然可以修改,但是vue报警告了。

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


<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>Documenttitle>
    <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里面的值看看是否可以边变,是否会报错。
vue.js data上的数据和props上的数据的区别:_第4张图片
vue.js data上的数据和props上的数据的区别:_第5张图片
很明显,我们可以看出,data里的值可以改变,而且不会报错。

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

你可能感兴趣的:(vue.js)