Vue中Prop的作用有哪些

Vue中Prop的作用有哪些？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联是一家以成都网站建设公司、网页设计、品牌设计、软件运维、营销推广、小程序App开发等移动开发为一体互联网公司。已累计为成都办公窗帘等众行业中小客户提供优质的互联网建站和软件开发服务。

Prop

基本用法

Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可

Vue.component('child', {
 ...
 // 接收message
 props: ['message']
 ...
})

tips：由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为。

Prop中的静态和动态值

在正常情况下，一般在父组件中通过v-bind定义一个动态值，子组件通过Prop接收该值，所以，很多人认为，Prop只能接收动态值。但是，其实Prop可以接受静态属性。

示例：

/* 父组件 */


/* 子组件 */
Vue.component('child', {
 ...
 // 成功接收
 props: ['type']
 ...
})

在示例中，父组件在子组件标签上定义了静态属性type，子组件依然通过Prop拿到了静态属性type。

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父组件的 Prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父组件以及同级子组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父组件发生更新时，子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop，如果你这样做了，Vue会在控制台抛出一个警告。

一般来说，如果子组件需要操作Prop中的值，需要将Prop中的值赋值给本地定义的属性：

...
props: ['message'],
data () {
 return {
  mes: this.message
 }
}
...

非Prop特性

非Props特性是指在组件上定义了属性，而又没有使用Prop接受属性。此时，子组件内不可使用该属性值，该属性会直接添加到子组件的根节点上。

比如，在一个只含有一个div的子组件上，如果我向子组件传了一个content属性，但是子组件不使用Prop接收content属性，则渲染结果为：