Vue的Props实例配置详解

时间:2022-11-07 欢莱人气:0

适用于：父子组件通信。

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

路由组件也可以传递 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 了。

加载全部内容