vue-单文件组件——创建，引入、注册，应用

vue-单文件组件-什么是

定义：

一个文件名字是以.vue结尾，并且里边的内容就是一个组件，这个文件就称作单文件组件

普通组件的缺点：

普通组件内容是 和 其它JS代码逻辑掺杂在一块儿，代码不易维护，其优势不容易发挥！

vue-单文件组件-最加单使用

注意：

​ A. 目前，单文件组件的使用必须在VueCLI的项目中进行

​ B. 项目的各个目录都要使用英文的

创建使用单文件组件步骤：

1. 把vuecli项目代码除了node_modules和.git以外的其他全部文件复制到03-web目录中
2. 修改package.json文件，“less”: “3.9.0”,
3. 执行yarn安装全部依赖包
4. 创建src/components/01-xxxx.vue组件
5. 在src/main.js中引入组件、注册组件
6. 在public/index.html中使用组件

示例：

vue-单文件组件-组织结构

单文件组件有3个组成部分：

<template>
	<div>xxxx</div>
</template>

<script>
export default {
  成员
  data:xx
  methods:xx
  filters:
  components:
  created
  ....
}
</script>

<style></style>

可以这样理解，一个组件就是一个Vue实例的体现，

​ template：就是div容器部分

​ script: 就是Vue实例部分

​ style: 就是给div容器(template)设置样式的

注意：

​ template内部需要有唯一根节点

​ script内部主要是通过es6模块化导出一个对象，内部成员完全参考Vue实例即可

​ 如果 script和style不需要，可以不设置，template标签是必须的

vue-单文件组件-综合应用

3个组成部分综合使用

1. 创建组件 components/02-Table.vue,内容如下

<template>
  <div>
    <!--结构-->
    <table>
      <tr>
        <td>序号</td>
        <td>名称</td>
      </tr>
      <tr>
        <td>{{info.id}}</td>
        <td @click="tip">{{info.name}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  // 行为
  export default {
    data(){
      return {
        info:{id:101,name:'奔驰'}
      }
    },
    methods:{
      tip(){
        alert('123')
      }
    },
    created(){
      console.log('table表格的组件在运行')
    }
  }
</script>

<style>
  /* 样式 */
  td{color:blue;}
</style>

2. 在main.js中引入并注册组件

   import  Table  from  './components/02-Table.vue'
   components:{
     'com-table':Table
   }
   

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

   <com-table></com-table
   

小结：

• 单文件组件 ，文件名字是.vue结尾的，里边有3个组成部分
• template标签：用于设定组件要显示的内容，内部必须有一个根节点(例如div)，可以理解为View部分
• script标签：通过ES6模块化(export default)方式导出一个对象，这个对象本质就是 [new Vue(对象参数)] Vue实例的对象参数部分，故内部所有的成员与Vue实例基本一致(也会拥有data、methods、components、filters、created等成员)
• style标签：设定样式，作用给template内部的各个html标签
• 组件设置引入(import xx from xx)和注册(组件内部直接注册)

vue-单文件组件-私有方式注册

组件注册有两个那种情况：

1. 私有注册

   import  xx  from  组件文件
   import  xx  from  组件文件
   new Vue({
     components:{
       名称: 组件模块xx,
       名称: 组件模块xx,
     }
   })
   

2. 全局注册

   import  xx  from  组件文件
   import  xx  from  组件文件
   Vue.component(名称, 组件模块xx)
   Vue.component(名称, 组件模块xx)
   Vue.component(名称, 组件模块xx)
   

   })

3. 全局注册

   import  xx  from  组件文件
   import  xx  from  组件文件
   Vue.component(名称, 组件模块xx)
   Vue.component(名称, 组件模块xx)
   Vue.component(名称, 组件模块xx)