一、组件是什么？
一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
二、组件的使用
1、全局注册
注册一个全局组件，使用 Vue.component(tagName, options)。
组件在注册之后，便可以作为自定义元素 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="example">
<my-component></my-component>
</div>
</body>
<!--引入vue.js文件.-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//注册
Vue.component('my-component', {
template: '<div>组件测试</div>'
})
//创建根实例
var example1 = new Vue({
el: "#example"
})
</script>
</html>
渲染为：
<div id="example">
<div>组件测试</div>
</div>
2、局部注册
不必把每个组件都注册到全局，可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="example2">
<my-component></my-component>
</div>
</body>
<!--引入vue.js文件.-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var child={
template:"<div>测试局部注册组件</div>"
}
var example2=new Vue({
el:"#example2",
components:{
'my-component':child
}
})
</script>
</html>
3、DOM 模板解析注意事项
当使用 DOM 作为模板时 ，会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：
<table>
<my-row>...</my-row>
</table>
自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：
<table>
<tr is="my-row"></tr>
</table>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="example3">
<table>
<tr is="my-row"></tr>
</table>
</div>
</body>
<!--引入vue.js文件.-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var child2={
template:"<tr>DOM 模板解析注意事项测试</tr>"
}
var example3=new Vue({
el:"#example3",
components:{
'my-row':child2
}
})
</script>
</html>
4、data必须是函数
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id="example4">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</body>
<!--引入vue.js文件.-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var counter={counter:0};
var child3={
template:'<button v-on:click="counter += 1">{{ counter }}</button>',
data:function () {
return {
counter:0
}
}
}
var example4=new Vue({
el:"#example4",
components:{
'simple-counter':child3
}
})
</script>
</html>
5、动态组件
使用props从父作用域将数据传到子组件
<div id="app">
<!-- 创建todo-item组件实例 -->
<ul>
<todo-item
v-for="item in list"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ul>
</div>
//定义todo-item组件
Vue.component("todo-item", {
props: ["todo"],
template: "<li>{{todo.text}}</li>"
});
var _vue = new Vue({
el: "#app",
data: {
list: [
{
id: 0,
text: "苹果"
},
{
id: 1,
text: "香蕉"
},
{
id: 2,
text: "芒果"
}
]
}
});
