Vue-Prop

rx的kkk

已于 2023-06-09 13:11:40 修改

阅读量48

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-06-09 12:58:55 首次发布

原文链接：https://v2.cn.vuejs.org/v2/guide/components-props.html

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中组件的Prop属性命名规则，包括在JavaScript中使用camelCase而在HTML中使用kebab-case。同时，它详细阐述了Prop的数据类型，如字符串、数字、布尔值、数组、对象等，并展示了如何进行Prop的类型验证和默认值设定，强调了单向数据流的概念以及违反验证规则时的警告机制。

摘要由CSDN通过智能技术生成

Prop 的大小写
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
amelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Prop 类型（数字、布尔值、数组、对象）

<div id="components-demo">
  <blog-post v-bind:title="a" v-bind:likes="b" v-bind:is-published="c" v-bind:comment-ids="d"
             v-bind:author="e" v-bind:callback="f" v-bind:contacts-promise="g">
  </blog-post>
</div>

  Vue.component('blog-post', {
    // 在 JavaScript 中是 camelCase 的
    props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise // or any other constructor
    },
    template: '<div>' +
              '<h3>{{ title }}</h3>' +
              '<h3>{{ likes }}</h3>' +
              '<h3>{{ isPublished }}</h3>' +
              '<h3>{{ commentIds }}</h3>' +
              '<h3>{{ author }}</h3>' +
              '<h3>{{ callback }}</h3>' +
              '<h3>{{ contractsPromise }}</h3>' +
              '</div>'
  })

  var a = new Vue({
    el: '#components-demo',
    data: {
      a: 'haha',
      b: 42,
      c: true,
      d: [234, 266, 273],
      e: {
        name: 'Veronica',
        company: 'Veridian Dynamics'
      },
      f: 'haha',
      g: 'haha'
    }
  })

单向数据流
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
Prop 验证
以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

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'].includes(value)
      }
    }
  }
})