prop传递数据

prop

• 是组件之间的通信方式，prop属性是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件
• props可以通过数组指定需要哪些属性。但在vue.js内部，数组格式的props会被格式化成为对象格式
• HTML特性是不区分大小写。所以会使用camelize函数将props名称驼峰化，即将a-b这样的名称转换成aB

父组件中
<child user-name="berwim"></child>

子组件中props选项中需要使用userName
props：['userName']

prop定义的数据类型

• 字符串类型
• 数组类型
• 布尔类型
• 函数类型

props: {
    //基础的类型函数
    propA：Number,
    //可能是一个数组，提供多个可能的类型：
    propB:[String,number],
    //对象类型,笔传且是字符串类型
    propC:{
        type:String,
        required:true 
    },
    //数值存在默认值
    propD:{
    type:Number,
    default:100
    },
    //数组/对象的默认值应当由一个工厂函数返回
    propE:{
     type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    propF:{
      type: Array,//数组类型
      default: () =>[]
    },
    propG: {
      validator: function(value) { //验证函数
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].includes(value);
      }
    },
    propH: { //Boolean类型
      type: Boolean,
      default: false
    },
  },

动态绑定

• 使用v-bind动态地将props绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

• 如果把一个对象的所有属性作为prop进行传递，可以使用不带任何参数的v-bind

todo: {
  text: 'Learn Vue',
  isComplete: false
}
---------------------绑定------------------
<todo-item v-bind="todo"></todo-item>
--------------------等价于-----------------
<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

 单向数据流

• 每次父组件更新时，子组件的所有prop都会更新为最新值。如果想在子组件内部改变prop
  • prop作为初始值传入后，子组件像把它当作局部组件数据来用
  • prop作为原始数据传入，由子组件处理成其他数据输出

-----------在子组件内：
-----------1.定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {        //将initialCounter复制给当前组件的局部变量counter
  return { counter: this.initialCounter }
}

-----------2.定义一个计算属性，处理 prop 的值并返回：
props: ['size'],
computed: {                             
  normalizedSize: function () {       //将size处理最后返回normalizedSize
    return this.size.trim().toLowerCase()
  }
}

参考文档：Prop传递数据 - 简书