Vue组件,动画,路由 ----Q17

三、组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML
元素，封装可重用的代码。

定义组件

Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。

全局注册

使用Vue.component(tagName, options)来定义：

/*定义全局组件*/

Vue.component('my-component',{

template:'

我是自定义组件

'

});

注意，HTML
特性是不区分大小写的，所有在定义组件时尽量使用中划线"-"来指定组件名。即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。

2）局部注册

在Vue实例中使用components属性来定义：

var app = new Vue({
    el:'#app',
    //使用components关键字
    components:{
        'inner-component':{
            template:'
我是局部注册组件
'
        }
    }
});

2、使用组件

image.png

完整代码:

3、is属性

在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到

标签的外部：

DOM解析：

image.png

原因是：table/ol/ul/select
这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则，比如:

• table> tr> [th, td];

• ol/ul > li;

• select > option

• 解决上述问题，可以使用is进行标签转换，形式：

< is="my-component">

image.png

完整代码：

4.模板

当模板的html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:

1. 直接使用字符串定义

2. 使用 Vue.component('my-component2',{ template:'#template2' });

   3）template标签

   
   
   Vue.component('my-component3',{
       template:'#template3'
   });
   
   

   4）单标签引用

   5）省略is

   
   
   Vue.component('my-component6',{
       template:'#template5'
   });
   
   

   除了