什么是组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。
使用组件的好处：
- 组件是可以复用性的。
- 易于维护。
- 有封装性，易于使用。
- 大型项目中降低组件之间重复性。
注册及使用组件
注册就是利用 component() 方法，先传入一个自定义组件的名字，然后传入这个组件的配置，语法如下所示：
Vue.component(tagName, options)tagName：组件名。options：配置选项。
注册好后，可以通过组件名来使用组件，例如：
<tagName></tagName>示例：
创建一个自定义组件 comp：
// 注册组件
Vue.component('comp', {
template: '<h1>这是一个自定义组件!</h1>'
})然后可以在 Vue 实例挂载的 DOM 元素中使用这个组件：
<body>
<div id="app">
<!-- 使用组件 -->
<comp></comp>
</div>
<script>
// 注册组件
Vue.component('comp', {
template: '<h1>这是一个自定义组件!</h1>'
})
// 创建实例
var app = new Vue({
el:"#app",
})
</script>
</body>局部组件
类似上面那样，使用 Vue.component() 创建的组件，所有的 Vue 实例都可以使用，叫做全局组件。
我们可以在某个 Vue 实例中注册只有自己能使用的组件，这叫做局部组件。
示例：
<body>
<div id="app">
<comp></comp>
</div>
<script>
var app = new Vue({
el:"#app",
components:{
'comp':{
template: `<div>这是一个局部组件，只能在当前Vue实例中使用</div>`,
}
}
})
</script>
</body>全局组件和局部组件的区别
- 使用范围：全局组件可以在页面中任何位置使用，而局部组件只能在定义它的
el中使用，不能在其他位置，否则就会失效。 - 定义方法：全局组件可以使用
Vue.component()定义，而局部组件可以通过 Vue 实例中component属性定义局部组件。 - 是否挂载：全局组件在扩展元素用于封装复用代码时不需要挂载，而局部组件必须手动挂载，否则会失效。
- 其他：全局组件中代码的编写是”component“ ，而局部组件中是”components“。
属性Props
Vue 组件可以使用 props 属性来声明一个自己的属性，然后父组件就可以往里面传递数据。简单来说就是组件的数据传递。
示例：
首先创建一个组件，然后在组件中声明一个自己的属性：
Vue.component('xkdcomp',{
template: '<div>这是一个自定义组件，父组件传给我的内容是：{{msg}}</div>',
props: ['msg']
})然后再调用该组件：
<body>
<div id="app">
<xkdcomp msg="欢迎来到侠课岛！"></xkdcomp>
</div>
<script>
Vue.component('xkdcomp',{
template: '<div>这是一个自定义组件，父组件传给我的内容是：{{msg}}</div>',
props: ['msg']
})
var app = new Vue({
el:"#app",
})
</script>
</body>一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
除了上面这种使用方式，我们还可以使用 v-bind 指令动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<div id="app">
<div><input v-model="message"> </div>
<xkdcomp v-bind:msg="message"></xkdcomp>
</div>
<script>
Vue.component('xkdcomp',{
template: '<div>{{msg}}</div>',
props: ['msg']
})
var app = new Vue({
el:"#app",
data:{
message:'你好，欢迎来到侠课岛！'
}
})
</script>
</body>
</html>Prop 验证
我们可以给组件的 props 属性添加验证，当传入的数据不符合要求时，Vue 会发出警告。
示例：
Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组或对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})type 可以是下面原生构造器：
- String
- Number
- Boolean
- Function
- Object
- Array
- Date
- Symbol
自定义事件
通过 prop 属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。
我们可以使用 v-on 绑定自定义事件，每个 Vue 实例都实现了事件接口：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
示例：
<body>
<div id="app">
<xkdcomp v-on:myclick="onClick"></xkdcomp> + <xkdcomp v-on:myclick="onClick"></xkdcomp> = <span>{{num}}</span>
</div>
<script>
Vue.component('xkdcomp',{
template: '<button v-on:click="sum">{{ counter }}</button>',
data() {
return {
counter: 0
}
},
methods: {
sum() {
this.counter += 1
this.$emit('myclick')
}
},
})
var app = new Vue({
el:"#app",
data: {
num: 0
},
methods: {
onClick() {
this.num += 1
}
}
})
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。