美文网首页
Vue中的prop属性

Vue中的prop属性

作者: hhaann | 来源:发表于2020-01-09 22:49 被阅读0次

用来接收父组件传给子组件的数据,可以在组件上注册一些自定义特性,当一个值传递给一个prop特性的时候,它就变成那个组件实例的一个属性。

用法:

// 父组件
<child message="this is message"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

假设此时的 message 的命名被 myMessage 时,父组件应该写为:
<child my-message="this is message"></child>
因为HTML中的名大小写不敏感,所以浏览器会把所有大写字符解释为小写字符。

传递静态或动态prop

静态传入

// 父组件
<child message="this is message"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

动态传入

<!-- 通过v-bind动态赋值 -->

// 父组件
<child v-bind:message="msg"></child>

// 在子组件中定义
Vue.component('child', {
 ...
 props: ['message']
 ...
})

单项数据流

  • 是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来。
  • 每次父组件发生更新时,子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop,如果你这样做了,Vue会在控制台抛出一个警告。

1、如果子组件需要操作prop中的值,需要将prop中的值赋值给本地定义属性:

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

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

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

prop验证

我们可以为组件的 prop 指定验证要求。如果有一个需求没有被满足,则会出错。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,

    // 多个可能的类型
    propB: [String, Number],

    // 必填的字符串
    propC: {
      type: String,
      required: true
    },

    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },

    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },

    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

相关文章

  • Vue Prop属性功能与用法实例

    这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原...

  • Vue中的prop属性

    用来接收父组件传给子组件的数据,可以在组件上注册一些自定义特性,当一个值传递给一个prop特性的时候,它就变成那个...

  • 深入浅析Vue中的Prop

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

  • 对vue的props实现双向数据流

    1、 使用Prop需要遵守的规定 vue官网中规定,vue中的Prop是单向数据流 在vue中,组件中的Prop是...

  • Vue学习记录

    vue data 组件定义只接受 function 父子组件属性传递: 父组件的子组件中 v-bind :prop...

  • Vue组件prop属性

    Prop prop 大小写 单项数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级...

  • Vue 关于组件(一)

    在Vue中,组件:小型的,一个个独立,可以复用的UI模块。它有三大概念:属性、事件、插槽 属性 自定义属性prop...

  • jquery 细节问题

    操作布尔属性 jquery操作以下元素的属性: 方法 jquery中attr和prop的区别 固有属性使用prop...

  • Vue学习笔记-prop属性

    1.prop 的大小写 (camelCase vs kebab-case) HTML中的特性名是大小写不敏感的,所...

  • vue中的prop

    学习vue有一段时间了,也写了一些东西。今天看文档突然看到了一个好玩的东西,那就是prop。prop的作用是父组件...

网友评论

      本文标题:Vue中的prop属性

      本文链接:https://www.haomeiwen.com/subject/kzsuactx.html