vue组件属性(props)及私有数据data解析
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中的数据，都是通过父组件传递给子组件的，是只读的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
elementplus el-table(行列互换)转置的两种方法
本文主要介绍了elementplus el-table(行列互换)转置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库
构建工具使用vue3推荐的vite,下面这篇文章主要给大家介绍了关于如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
electron踩坑之remote of undefined的解决
这篇文章主要介绍了electron踩坑之remote of undefined的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要为大家详细介绍了vue3实现关键字高亮指令的相关资料,w文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
Vue富文本的实现可以使用一些现成的第三方库,如Quill、Vue-quill-editor、wangEditor等,这篇文章主要给大家介绍了关于vue实现富文本编辑器的相关资料,需要的朋友可以参考下2024-01-01
本文主要介绍了Vue首屏加载过慢出现长时间白屏的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了如何在Vue2中实现组件props双向绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了实现Vue的markdown文档可以在线运行的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue.js和Vue.runtime.js区别浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-06-06
最新评论