Vue的Props实例配置详解

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

<!-- 在 HTML 中是 kebab-case 短横线分隔命名 -->
<blog-post post-title="hello"></blog-post>

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

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

  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
      }
    }
  }

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

<!-- 动态赋予一个变量的值，该变量值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" },
	}
}

<!-- 即便 `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>

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

<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";
      }
  }