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传递数据 - 简书

Logo

前往低代码交流专区

更多推荐