Vue---自定义组件

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue---自定义组件

半指温柔乐 2018-09-23 23:01:00 浏览566
展开阅读全文

一、组件定义

       组件 (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>

 

网友评论

登录后评论
0/500
评论
半指温柔乐
+ 关注