VueJS Component 组件 - 蝴蝶教程

什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。

注意：组件的 template 模板必须有且只有一个根标签（所有内容必须由一个标签套起来）。

全局组件

语法：Vue.component("自定义标签的名字",{配置对象})

全局组件的特点：

全局组件可以在任何被挂着的标签中使用。
全局组件的配置对象中必须包含 template 属。

如果该组件的特定功能需要在任何被 Vue 实例挂载的标签中使用；推荐使用全局组件：

<div id="app">
   //引用全局组件：方式一
   <component1></component1>
</div>

<div id="app2">
   //引用全局组件：方式二
   <component2></component2>
</div>

<div id="app3">
   //引用全局组件：方式三
   <component3></component3>
</div> 

//方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）
<script type="text/template" id="component2">
   // 这个div是根标签
   <div>
       <h1>全局组件（方式二）</h1>
   </div>
</script>

// 方式三：定义模板（建议使用）
<template id="component3">
   //这个div是根标签
   <div>
         <h1>全局组件（方式三）</h1>
   </div>
</template>

<script>
//定义全局组件（方式一）
Vue.component("component1",{
    template:"<h1> 全局组件（方式一）</h1>"
});

//定义全局组件（方式二）
Vue.component("component2",{
    template:"#component2"
});

//定义全局组件（方式三）
Vue.component("component3",{
    template:"#component3"
});
      
//挂载vue实例(方式一)
var app= new Vue({
    el:"#app",
});

//挂载vue实例（方式二）
var app2= new Vue({
    el:"#app2",
});

//挂载vue实例（方式三）
var app3= new Vue({
    el:"#app3",
});
</script>

尝试一下

局部组件

局部组件是定义在某个 vue 实例上的

局部组件语法:

var app = new Vue({
　　el: "#app",
　　data: {},
　　components : {
　　　 "局部组件的名字1" : {组件的配置对象}
　　　 "局部组件的名字2" : {组件的配置对象}
　　}
});

局部组件只能够在所挂载的标签中使用：

<div id="app">
   //引用局部组件：方式一
   <component1></component1>
   <hr />
   //引用局部组件：方式二
   <component2></component2>
   <hr />
   //引用局部组件：方式三
   <component3></component3>
</div>
//方式二：定义模板（注意：如果使用script标签，建议加上type="text/template"）
<script type="text/template" id="component2">
   // 这个div是根标签
   <div>
       <h1>局部组件（方式二）</h1>
   </div>
</script>

// 方式三：定义模板（建议使用）
<template id="component3">
   //这个div是根标签
   <div>
         <h1>局部组件（方式三）</h1>
   </div>
</template>

<script>
var app= new Vue({
   el:"#app",
   components:{
       //定义局部组件（方式一）
       "component1":{
            template:"<h1> 局部组件（方式一）</h1>"
       },
       //定义局部组件（方式二）
       "component2":{
           template:"#component2"
       },
       //定义局部组件（方式三）
       "component3":{
           template:"#component3"
       },
   }
})
</script>

尝试一下

组件中的数据必须是函数

组件中数据的定义：

"组件的名字":{
   template: "",
   data : function(){
      return {
         键1:值1,
         键2:值2
      }
   }
}

要注意的事项：

data 数据只能够以函数的形式返回,因为函数中可以写其他的业务代码。
只能够在各自的组件模板中使用各自的组件中的 data 数据。
Vue 对象中的数据不能够在组件中使用，组件的数据也不能够在挂载的 html 标签上使用。

示例：

<div id="app">
   // 这里引用的message是vue实例里的data数据
   {{message}}
   //引用组件
   <component1></component1>
</div>

<template id="component1">
   //这个div是根标签
   <div>
         <h1>我是全局引入的组件</h1>
   </div>
</template>

<script>
var app= new Vue({
   el:"#app",
   data:{
       message:"这里是蝴蝶教程"
   },
   components:{
       //定义局部组件（方式一）
       "component1":{
           template:"#component1",
           data:function(){
               return {
                   message:"我是局部组件！！"
               }
           }
       }
   }
})
</script>

尝试一下

组件中的 name 属性

在给子组件定义属性的时候，通常第一个属性就是 name,例如下面:

<script>
export default {
   name: 'VHeader',
   data () {
      return {}
   },
   methods: {
   }
}
</script>

定义 name 属性一般有三个方面的作用：

为了方便在组件自身调用自身出现递归的时候便于调用。
单独取消某个页面的 keepalive 缓存时更好的调用。
使用 vue 工具进行查看网页结构的时候更好的查看网页结构。

组件中的 is 属性

我们通常使用 is 属性解决模板标签 bug 的问题。下面我们通过一个 table 标签的 bug 案例进行说明。

我们先写一个简单的 Vue 实例，并创造一个 row 的组件，将它的模板 template 置为 '<tr><td>这个是td内容</td></tr>'，按照下面的示例进行放置：

<div id="app">
<table>
   <tbody>
      <row></row>
      <row></row>
      <row></row>
   </tbody>
</table>
</div>
<script>
   Vue.component('row',{
      template: '<tr><td>这个是td内容</td></tr>'
   });

   var vm = new Vue({
      el: "#app"
   });
</script>

该示例中，由于 H5 的规范 table 标签下 tbody 下只能是 tr，所以浏览器在渲染的时候出了问题。可以看到组件 row 渲染的 "这个是td内容" 都跑到了 table 之外。

解决这个问题的方法就是，我们按照规范在 tbody 之下使用 tr 。但我们用 is= 将 tr 变成 row 组件：

<div id="app">
<table>
   <tbody>
      <tr is="row"></tr>
      <tr is="row"></tr>
      <tr is="row"></tr>
   </tbody>
</table>
</div>
<script>
   Vue.component('row',{
      template: '<tr><td>这个是td内容</td></tr>'
   });

   var vm = new Vue({
      el: "#app"
   });
</script>

尝试一下

这样我们在遵循规范的同时，也使用了 Vuejs 的组件模板；可以看到接下来的浏览器 DOM 渲染已经正常，如下图所示：