首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Props

Vue的Props实例配置详解

2022-11-05 08:55:17 作者：欢莱

props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下

适用于：父子组件通信。

如果父组件给子组件传递(函数)数据：本质是子组件给父组件传递数据；
如果父组件给子组件传递的(非函数)数据：本质就是父组件给子组件传递数据。

路由组件也可以传递 props数据。

1、Prop 的大小写

HTML 中的属性名大小写不敏感，浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 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>

2、Prop 类型

子组件指定（限制）父组件传入的Prop的值的类型。当子组件接收到错误的类型时从浏览器的 JavaScript 控制台提示用户。

// 接收数据并对数据进行类型限制
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

不限制Prop类型是这样写：

// 简单的声明接收（不能声明不传过来的数据）
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

3、Prop验证

在子组件定制接收的 prop 的验证方式，可以为 props 中的值提供一个带有验证需求的对象。如果有一个需求未满足，则 Vue 会在浏览器控制台中警告。

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      // propC的类型
      type: String,
      // 设置 propC 必须传递过来   
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      // propD可传可不传，不传则值默认为100
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

4、传递静态|动态 Prop

传入一个字符串

传静态值：

<blog-post title="hello"></blog-post>

prop 通过 v-bind 动态赋值：

<!-- 动态赋予一个变量的值，该变量值post.title是字符串 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 ，post.title和post.author值是字符串-->
<blog-post
  v-bind:title="post.title + ' and ' + post.author"
></blog-post>
......
data() {
	return {
		post: { title:"aaa", author:"bbb" },
	}
}

以上传入的值都是字符串类型的，但任何类型的值都可以传给 prop，如：

传入一个数字

<!-- 即便 `42` 是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

传入一个布尔值

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个数组

<!-- 即便数组是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象

<!-- 即便对象是静态的，仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

传入一个对象的所有 property

<blog-post v-bind="post"></blog-post>
......
post: {
  id: 1,
  title: 'My Journey with Vue'
}

5、修改Prop数据

若想对接收的prop数据进行修改,则需要在data中重新定义，不能直接对prop修改，即this.postTitle = "hhh"会报错。

<h3>{{ postTitle }}</h3>
<h3>{{ myTitle }}</h3>
<button @click="xiu"></button>
......
  // 在 js 中是 camelCase 驼峰命名法 
  props: ['postTitle'],
      
  // 若想对接收的prop数据进行修改,则需要在data中重新定义，不能直接对prop修改，即this.postTitle = "hhh"会报错。
  ......
  data() {
	 return {
		myTitle: this.postTitle,
	}
  },
  methods: {
      xiu() {
          this.myTitle = "hhh";
      }
  }

注意：也可以不写：props: ['postTitle']来接收，因为this.$attrs中有传来的数据postTitle ，可以直接使用。但是我们一般不这样写。因为不能限制类型，写着麻烦等。

当接收props: ['postTitle']时，this.$attrs中就不存在传来的数据postTitle 了。

到此这篇关于Vue的Props实例配置详解的文章就介绍到这了,更多相关Vue Props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！