一、组件定义
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
二、自定义组件
1、全局组件
注册全局组件:可以使用可以使用 Vue.component(tagName, options)
1 Vue.component('my-component', {
2 // 选项
3 })
组件在注册之后,便可以作为自定义元素 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件:
1 <div id="example">
2 <my-component></my-component>
3 </div>
测试实例:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例 - 全局组件</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <!-----引用组件----->
11 <my-component></my-component>
12 </div>
13
14 <script>
15 // 注册
16 Vue.component('my-component', {
17 template: '<h3>我是全局组件!</h3>'
18 })
19 // 创建根实例
20 new Vue({
21 el: '#app'
22 })
23 </script>
24 </body>
25 </html>
2、局部组件
你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components注册仅在其作用域中可用的组件:
1 var Child = {
2 template: '<h3>我是局部组件!</h3>'
3 }new Vue({ // ... components: { // <my-component> 将只在父组件模板中可用 'my-component': Child }})
例子2:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例 - 局部组件</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <!-----引用组件----->
11 <my-component></my-component>
12 </div>
13
14 <script>
15 var Child = {
16 template: '<h3>自定义组件!</h3>'
17 }
18
19 // 创建根实例
20 new Vue({
21 el: '#app',
22 components: {
23 // <my-component> 将只在父组件模板可用
24 'my-component': Child
25 }
26 })
27 </script>
28 </body>
29 </html>
三、DOM 模板解析注意事项
当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意,像ul、ol、select、table这样的元素里包含的元素有限制,而另一些像option的元素只能出现在某些特定元素的内部,在自定义组建中使用这些受限制的元素,容易导致一些问题。
1 <table>
2 <my-row>...</my-row>
3 </table>
应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:
<script type="text/x-template"> JavaScript 内联模板字符串 .vue 组件 因此,请尽可能使用字符串模板。
上面的意思是下面的例子是会不行的:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <select>
11 <optioncomp></optioncomp>
12 </select>
13 </div>
14
15 <script>
16 new Vue({
17 el: '#app',
18 components:{
19 'optioncomp':{
20 template: '<option >a</option>'
21 }
22 }
23 })
24 </script>
25 </body>
26 </html>
但是用is特殊属性可以:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <select>
11 <option is="optioncomp"></option>
12 </select>
13 </div>
14
15 <script>
16 new Vue({
17 el: '#app',
18 components:{
19 'optioncomp':{
20 template: '<option >a</option>'
21 }
22 }
23 })
24 </script>
25 </body>
26 </html>
或者temp模板标签也可以:
1 <body>
2 <div id="app">
3 <select>
4 <option is="optioncomp"></option>
5 </select>
6
7 <!--模板内容存放区域-->
8 <script type="x-template" id="optioncompTemp">
9 <option >a</option>
10 </script>
11 </div>
12
13 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
14 <script> new Vue({ el: '#app', components:{ 'optioncomp':{ template: '#optioncompTemp' } } }) </script></body>
或者内联模板字符串也行
1 <body>
2 <div id="app">
3 <selectcomp></selectcomp>
4 </div>
5
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 <script> Vue.component('optioncomp',{ template: '<option >a</option>' }); new Vue({ el: '#app', components:{ 'selectcomp':{ template: ' <select>
8 <optioncomp></optioncomp></select>' } } }) </script></body>
data必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data 必须是函数。实际上,如果你这么做:
1 <code class="language-html">Vue.component('my-component', {
2 template: '<span>{{ message }}</span>',
3 data: {
4 message: 'hello'
5 }
6 })</code>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="example-2">
10 <simple-counter></simple-counter>
11 <simple-counter></simple-counter>
12 <simple-counter></simple-counter>
13 </div>
14
15 <script>
16 var data = {counter:0};
17 Vue.component('simple-counter',{
18 template:'<button v-on:click="counter+=1">{{counter}}</button>',
19 data:function(){
20 return data;
21 }
22 })
23 new Vue({
24 el: '#example-2'
25 })
26 </script>
27 </body>
28 </html>
由于这三个组件实例共享了同一个 data 对象,因此递增一个 counter 会影响所有组件!这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题:
1 data: function () {
2 return {
3 counter: 0
4 }
5 }
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue 测试实例</title>
6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
7 </head>
8 <body>
9 <div id="example-2">
10 <simple-counter></simple-counter>
11 <simple-counter></simple-counter>
12 <simple-counter></simple-counter>
13 </div>
14
15 <script>
16
17 Vue.component('simple-counter',{
18 template:'<button v-on:click="counter+=1">{{counter}}</button>',
19 data: function () {
20 return {
21 counter: 0
22 }
23 }
24 })
25 new Vue({
26 el: '#example-2'
27 })
28 </script>
29 </body>
30 </html>