vue组件（单文件组件）

组件是拥有一定功能许多html标签的集合体，是对html标签的封装

私有组件语法：

new Vue({
  components:{
    '组件的名称': { 配置对象成员 }, 
    '组件的名称': { 配置对象成员 }...
  },
})

demo:

 <div id="app">
    <h2>组件应用</h2>
    <!-- 组件的名字被当做html标签使用 -->
    <com-page></com-page>
  </div>

  var vm = new Vue({
      // 注册私有组件
      components:{
        // 组件名称:{配置对象成员}
        // 组件名称格式推荐为 xx-yy 样子的
        'com-page':{
          // template: 设定当前组件拥有的html标签
          template:`
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          `
        }
      },
      el:'#app',
      data:{
      },
      methods:{
      }
     });

可以认为组件是特殊的Vue实例，拥有着与Vue实例大致相同的成员
例如 data、methods、filters、directives、created等等成员在组件内部都可以设置
注意：

组件data成员 与 Vue实例的 不一样，需要通过 function/return 设置，具体要返回一个{}对象

demo

给分页组件设置 单击事件、data成员、created生命周期 方法并执行

 <div id="app">
    <h2>组件应用-其他成员</h2>
    <!-- 组件的名字被当做html标签使用 -->
    <com-page></com-page>
  </div>

<script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      // 注册私有组件
      components:{
        // 组件名称:{配置对象成员}
        // 组件可以理解为是特殊的Vue实例，因此像 data、methods、filters、directives、computed等
        // 成员在组件内部都可以使用

        // 组件名称格式推荐为 xx-yy 样子的
        'com-page':{
          // template: 设定当前组件拥有的html标签
          template:`
            <ul>
              <li>{{ prev }}</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li @click="xia()">{{ next }}</li>
            </ul>
          `,
          created(){
            console.log('created已经执行了')
          },
          methods:{
            xia(){
              console.log('进入下一页')
            }
          },
          // 组件中data的样子需要是function/return形式(与Vue实例不同)
          data:function(){
            return {
              prev:'上一页',
              next:'下一页',
            }
          }
        }
      },
      el:'#app',
      data:{
      },
      methods:{
      }
     });
  </script>

data里使用function

组件中声明的data成员，值需要是一个function，内部通过return返回{}对象供使用，这个特性必须遵守

为什么组件的data必须是一个function：
答：组件根据业务需要，可以被使用多次，function会使得每次组件使用的时候都亲自执行并给当前应用分配一个独立的数据对象，这样多个组件的data数据是独立的，互相没有关联、牵扯，互相不会覆盖
相反，如果直接通过{}对象 给data赋值，多次使用组件会造成大家的data都是共享的，就是一份数据，一个组件修改data后，其他组件都受到影响，这与业务逻辑是相违背的

image.png

组件 与 Vue实例 异同：

1. 组件中的 data 必须是一个 function 并 return 一个 字面量对象
   (Vue 实例的 data 可以是 字面量对象，也可以是 function/return形式，前者推荐使用)
2. 组件中直接通过 template 属性来指定组件的html结构
   Vue 实例中，一般通过 el 属性来指定渲染的容器，当然也可以使用template
3. 组件和Vue实例拥有类似的成员，都有自己的生命周期函数，过滤器，methods、data等成员

全局组件语法

Vue.component(组件名称,{配置vue对象成员})
new Vue({
el:'#app'
})

全局组件需要在new Vue之前设置
在被vue绑定了的html元素中才能使用组件,如果一个div没有被vue绑定,那么这个div中不能使用之前注册的组件

单文件组件

把一个组件的全部内容汇合到一个文件中，文件名字是以.vue结尾的就称作vue单文件组件

步骤:

1. 通过vuecli创建一个空的项目并运行
2. 创建单文件组件 src/components/a.vue文件，内容如下：

<template>
  <div id="page">
    <!--结构：当前组件拥有的html标签集合体现-->
    <!--要求内部有唯一根元素-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</template>

<script>
// 行为
</script>

<style>
/*给结构设置css样式*/
</style>

3. 在src/main.js文件 导入、注册 组件，内容如下：

// 导入单文件组件(ES6的默认导入)
import ComPage from './components/a.vue'

new Vue({
  // 注册单文件组件
  components:{
    // 名称:组件模块
    'com-page':ComPage
  },

注意：

| 1. vue要引入 vue.common.js的文件包

4. public/index.html文件 使用 单文件组件

   <div id="app">
      {{msg}}
      <hr />
      <!-- 应用单文件组件 -->
      <com-one></com-one>
    </div>

注意：

1. 单文件组件的模板内容必须通过template绘制,内部要求有唯一根元素
2. 单文件组件文件本身比较特殊，必须借助vuecli脚手架项目才可以运行

image.png

一个单文件组件涉及有如下3部分：

1. template标签，内部要求有唯一根元素(推荐div)，template是html5标签，只运行，浏览器源代码不显示
2. script标签：该标签内部可以执行普通js代码，但是最主要的是内部可以通过export default {} 导出一个对象，该对象的成员完全可以参考 Vue实例，类似 data、methods、created、filters、components等等都可以应用，各个成员都是为template模板服务的
3. style标签:设置css样式，作用给template内部的html标签使用

注意：
script和style如果不需要，可以不设置，template必须要写

组件script设置成员应用：
模板代码：
components/01.vue

<template>
  <div id="page2">
    <!--结构：当前组件拥有的html标签集合体现-->
    <!--要求内部有唯一根元素-->
    <ul>
      <li @click="up">{{prev}}</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>{{next}}</li>
    </ul>
  </div>
</template>

<script>
// 单文件组件  就是 特殊的Vue实例，可以参考配置相关成员
// 行为：具体是给template提供服务的，有固定的ES6模块化导出动作
export default {
  // 成员(具体可以参考Vue实例)
  data:function(){
    return {
      prev:'上页',
      next:'下页',
    }
  },
  methods:{
    up(){
      console.log('进入上一页')
    }
  },
  created(){
    console.log('单文件组件的created自动执行了')
  }
  // filters:,
  // directives:,
  // ……
}
</script>

<style>
/*给结构设置css样式*/
#page2{border:2px solid orange;}
</style>

main.js引入和注册

import ComTwo from './components/01.vue'

Vue.config.productionTip = false

new Vue({
  components:{
    // 名称:{配置对象成员} // 普通组件注册
    // 名称:组件模块名称 // 单文件组件注册
    'com-one':ComOne, // 单文件组件注册
    'com-two':ComTwo,
  },

index.html应用

 <hr>
      <com-two></com-two>

私有注册应用

私有方式注册语法：

new Vue({
  components:{
        组件名称: 组件模块,
        组件名称: 组件模块,
        组件名称: 组件模块,
    }
})

demo

1. 创建组件文件 src/components/table.vue

<template>
  <div>
    <table>
      <tr>
        <td>序号</td>
        <td>名称</td>
        <td>操作</td>
      </tr>
      <tr>
        <td>{{goods.id}}</td>
        <td>{{goods.name}}</td>
        <td><button @click="del()">删除</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
// es6模块化默认导出
// export default 对象 ，
//  该对象的成员可以参考Vue实例，因此data/methods/filters/created/computed等
//  并且是为 上述template做服务的
export default {
  data(){
    return {
      goods:{id:203,name:'奔驰汽车'}
    }
  },
  methods:{
    del(){
      console.log('该商品已经被删除了')
    }
  },
  created(){
    console.log('table表格的数据已经准备好了')
  }
}
</script>

<style>
/*css样式，具体也是为template做服务的*/
td{color:orange;}
</style>

2. 在main.js中引入组件 并 通过 私有方式注册 好

import ComTable from './components/Table'

Vue.config.productionTip = false

new Vue({
  // 把导入进来的组件给注册好
  // components:{组件名称:{配置对象成员}} // 普通组件
  // components:{
  //   组件名称:组件模块,
  //   组件名称:组件模块,
  // } // 单文件组件
  // 组件名称推荐是“xx-yy”格式
  components:{
    'com-one':ComOne,
    'com-table':ComTable,
  },

3. 在public/index.html中应用组件

<com-table></com-table>

注意：

vuecli脚手架已经把一些通用文件的后缀设置好了，像.js、.vue等可以不设置

小结：

1. 单文件组件，每个组件都有3个部分（template/script/style）
2. template 是固定标签，内部要求有唯一根元素
3. script 导出一个对象 对象成员可以参考Vue实例
4. style 设置样式
5. 组件需要被main.js文件 引入、注册，之后index.html应用