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中的数据,都是通过父组件传递给子组件的,是只读的。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部