Prop(Vue2)

Vue官网
仅仅是个人学习的记录

写法: 建议后者形式，更清晰明了

props: ['cityName', 'person']
或
props: {
    cityName: { // 驼峰命名
      type: String, // 类型
      default: '' // 默认值
    },
    person: {
      type: String,
      default: ''
    }
  }

image.png

用法:
引入:

image.png

<child-module :cityName="cityName" @showCityName="updateCityName"></child-module>

image.png

或

<child-module :city-name="cityName" @showCityName="updateCityName"></child-module>

image.png

传入静态或动态Prop
通过person=""传入一个静态的值

静态传值.png

通过v-bind:city-name(简写:city-name)传入一个动态的值

:city-name动态传值.png

传入数字: 使用v-bind:(简写:)告诉Vue
传入布尔: 使用v-bind:(简写:)告诉Vue
传入数组: 使用v-bind:(简写:)告诉Vue
传入对象: 使用v-bind:(简写:)告诉Vue

传入一个对象的所有property:
如果想要将一个对象的所有 property 都作为 prop 传入，可以使用不带参数的 v-bind (取代 v-bind:prop-name):

给定一个对象post:

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>
等价于
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

单向数据流:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行
这样会防止从子组件意外变更父级组件的状态

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值
这意味着不应该在一个子组件内部改变 prop