组件、Prop属性的基本用法

Props的两种形式

Prop官方链接

Vue中Prop类型可以以字符串数组的形式列出：

props：['title', 'likes', 'author']

还可以以对象形式列出：

props: {
   
	// 类型字符串
	title: String,
	// 类型数字
	likes: Number,
	author: {
   
		// 类型布尔值
		type: Boolean,
		// 默认值false
		default: false,
	}
	
}

传递静态Prop

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

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

传递动态Prop

prop 可以通过 v-bind 动态赋值：