vue之prop-CSDN博客

本文链接：https://blog.csdn.net/weixin_44989478/article/details/108636073

1. 作用

Prop想必都很熟悉，通常被用作父传子数据时使用，先简写下传值步骤

//子组件接收
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

//父组件传值
<blog-post title="My journey with Vue"></blog-post>

2.Prop的类型

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
  // 基础类型检测 （`null` 意思是任何类型都可以）
  A: Number,
  // 多种类型
  B: [String, Number],
  // 必传且是字符串
  C: {
      type: String,
      required: true
   },
 
}

也可以设置默认值

props: {
  title: {
  	type:String,
  	default:'点赞哟', 
  },
}

父组件传值如果是静态的

<blog-post title="My journey with Vue"></blog-post>

如果是动态的

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post  v-bind:title="post.title + ' by ' + post.author.name" >
</blog-post>

有些特殊情况，比如数字，布尔需要当动态的处理，数组，对象也是

3.修改Prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

总结就是一句话你不能在一个子组件内部改变 prop，那怎么办呢？

那就是使用计算属性

①.定义一个本地的 data property 并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

②.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：


<template>
	<div>
		<p>{{normalizedSize}}</p>
	</div>
</template>

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

4.Prop实时更新

相信大家都想到了，那就是使用 watch（侦听器）。
使用watch监听prop值的变化

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
watch:{
    initialCounter(val){
      this.counter = val
    }
 }