当前位置 : 主页 > 网络编程 > JavaScript >

vue组件属性(props)及私有数据data解析

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 props 1、组件Comp1.vue 2、使用了Comp1的页面 3、运行结果 data 子组件中data和props的区别 vue组件中,props是公有属性,主要对外,相当于类里面的get、set方法操作的属性;data是私有数据
目录
  • props
    • 1、组件Comp1.vue
    • 2、使用了Comp1的页面
    • 3、运行结果
  • data
    • 子组件中data和props的区别

      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、运行结果

      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>
      

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

      子组件中data和props的区别

      子组件中的data数据,不是通过父组件传递的是子组件私有的,是可读可写的。

      子组件中的所有 props中的数据,都是通过父组件传递给子组件的,是只读的。

      以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

      上一篇:Vue中keyup.enter和blur事件冲突的问题及解决
      下一篇:没有了
      网友评论