vue组件属性（props）及私有数据data

短命女 2022-10-13 15:47 204阅读 0赞

vue组件中，props是公有属性，主要对外，相当于类里面的get、set方法操作的属性；data是私有数据，主要供组件内部访问。

vue作为一种前端开发框架，组件是其中的主角吧。其实任何一种前端框架，除了vue，还有react，组件都应该是主角。为啥呢，因为组件最能体现面向对象思想，单一职责，良好的封装性，高内聚，低耦合，利于复用和维护，提升开发效率，符合人类思维模式。。。好处多多。所谓的前端，就是跑在浏览器一侧的代码。以前的前端代码，写的时候是什么样，最终运行的时候就是什么样，完全由浏览器解释运行，所以也叫静态页面。现在的前端开发框架完全不是这样，它类似于服务器端的开发模式，代码写好之后，需要编译、发布。这就为代码的组件化创造了条件。如果想完全用html,js这类纯原生的代码实现复用，是非常困难的。比如js,引入js文件当然可以复用，但粒度比较粗的情况下，冗余量大，并且想在运行的时候各种参数传递，组合，提供动态生成效果，不是一般的困难，根本提供不了像asp.net,jsp这种有服务器加持，先由服务器解释，生成，再输出到浏览器端这种便利。可以这么说，前端代码只有采用各种打包工具进行发布这种模式，或者有了react、vue等开发框架，才使得前后端分离真正落地。

扯远了。vue组件中，props代表公有属性，主要对外，可用于接收父组件或页面传递过来的参数；data则代表私有数据，组件内部使用，不推荐外部进行操作或读取。当然，你硬是要访问，应该也能访问得了。

## 一、props ##

**1、组件Comp1.vue**

<template>
      <div>
        { { info}}
      </div>  
    </template>
    
    <script>
    let _info = "加油！"
    
    export default { 
      props: { 
        info: { 
          default: _info
        }
      }
      /* 写成 props: ['info'] 也可以，但没有默认值 */
    }
    </script>

**2、使用了Comp1的页面**

<template>
      <div>
        <div>
          <Comp1 />
        </div>      
        <div>
          <Comp1 info="要坚持！" />
        </div>  
        <div>
          <Comp1 :info="ourInfo" />
        </div>   
      </div>  
    </template>
    
    <script>
    import Comp1 from './Comp1.vue'
    
    export default{ 
      components:{ 
        Comp1
      },
      data(){ 
        return { 
          ourInfo:'别放弃！'
        }
      }
    }
    </script>

**3、运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]

## 二、data ##

<template>
      <div>
        <div>
          <Comp1 />
        </div>      
        <div>
          <Comp1 info="要坚持！" />
        </div>  
        <div>
          <Comp1 :info="ourInfo" />
        </div>   
        <div>
          { { ourInfo2}}
        </div>
        <div>
          { { ourInfo3}}
        </div>    
      </div>  
    </template>
    
    <script>
    import Comp1 from './Comp1.vue'
    
    export default{ 
      components:{ 
        Comp1
      },
      data(){ //Vue 在创建新组件实例的过程中调用此函数
        return { 
          ourInfo:'别放弃！',
          ourInfo2:'尽人事，听天命!',
          ourInfo3:'尽人事，听天命!'
        }
      },
      mounted(){ 
        this.ourInfo3 = '只管努力去做，但求无愧于心'
      }
    }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]

props由外部传入，通常通过attribute的方式传入，到了组件这里，一般不做修改；data则在组件内部自行操控。二者都对应数据，但有所区别。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/94913052d5bf4b869c61513d19fd8e4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/3aba76a68e3641df868fbcfa0de8ccca.png