//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 向Vue注册这个组件，名称定为my-component
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
//Vue层：
<div id="example">
<my-component></my-component>
</div>

<div id="example">
<div>A custom component!</div>
</div>

//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: '<div>A cu stom component!</div>'
})
// 不用注册
//Vue.component('my-component', MyComponent)
// 创建MyComponent 实例
new MyComponent ({
el: '#example'
})
//Vue层：
<div id="example">
//不用组件
//<my-component></my-component>
</div>

<div id="example">
ssssdfsdaf
<button>abc</button>
</div>

<div id="example">
<my-template>ssssdfsdaf<my-template>
<button>abc</button>
</div>

// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})

<table>
<my-component></my-component>
<my-component></my-component>
</table>
// 定义
var MyComponent = Vue.extend({
template: '<tr>A custom component!</tr>'
})

<table>
<tr is="my-component"></tr> //这里改成is属性
<tr is="my-component"></tr>
<tr is="my-component"></tr>
</table>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>' //这里不能用tr
})

<table>
<tr><my-component></my-component></tr>
<tr><my-component></my-component></tr>
<tr><my-component></my-component></tr>
</table>

Vue.component('child', {
// 声明 props，这里驼峰式命名
props: ['myMessage'],
//模板中可以这样用
template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})

Vue.component('child', {
// 声明 props，这里驼峰式命名
props: ['myMessage'],
//模板中可以这样用
template: '<span>{{ myMessage+1}}</span>' //改成表达式
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child> //这里先不改

Vue.component('child', {
// 声明 props，这里驼峰式命名
props: {myMessage:Number},
//模板中可以这样用
template: '<span>{{ myMessage+1}}</span>' //改成表达式
})

<child my-message="123"></child> //改成123

//#字面量语法 vs. 动态语法
//初学者常犯的一个错误是使用字面量语法传递数值：
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
因为它是一个字面 prop，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算：
<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>

<child :my-message="123"></child> //改成123