Vue---自定义组件

一、组件定义

       组件 (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 条评论
登录 后参与评论

相关文章

来自专栏西枫里博客

解决Chrome不兼容li标签中的文本溢出自动隐藏的问题

一般情况下对文章列表的调用,通常使用ul循环li标签。受页面模块宽度的的限制,一般需要对li进行文本内容溢出隐藏处理,实现更加合理的排版。经过测试在li标签中使...

892
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu....

2300
来自专栏AzMark

Python 学习之 Tkinter「下」

2195
来自专栏每日一篇技术文章

weex-11-组件slider的使用

1.怎么让banner的宽度和屏幕的宽度相等 2.怎么让banner自动轮播和轮播间隔 3.如何添加指示器 4.如何设置指示器的颜色和大小 5.点击轮播...

1621
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

2933
来自专栏互联网开发者交流社区

最新jquery+easyui_api培训文档

1424
来自专栏mukekeheart的iOS之旅

自定义组合控件的过程

自定义组合控件的过程 1.自定义一个View 一般来说,继承相对布局,或者线性布局 ViewGroup; 2.实现父类的构造方法。一般来说,需要在构造方法里初始...

2678
来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2229
来自专栏练小习的专栏

当inline-block和text-indent遇到IE6,IE7

在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#" class...

1926
来自专栏技术博客

Knockout.Js官网学习(创建自定义绑定)

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可...

1104

扫码关注云+社区

领取腾讯云代金券