非单文件组件指的是：一个文件中包含了多个组件。
Vue 中使用组件的三大步骤：1. 创建组件、2. 注册组件、3. 使用组件。
组件使用流程【第一步：创建组件】
利用 Vue.extend() 方法创建组件:
// 第一步：创建 frameHead 组件 const FrameHead = Vue.extend({ name: "fhead", template:` <div> <strong>{{title}}</strong> <span>{{username}}</span> </div> `, data(){ return { title: "商城管理系统", username: "张三" } } }) // 第一步：创建 frameNav 组件【简写】 // const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象; const FrameNav = { template:` <ul> <li v-for="(item,index) in list" :key="index" @click="isHref(item)"> {{item}} </li> </ul> `, data(){ return { list: ["首页","用户管理","商品管理","轮播图管理"] } }, methods:{ isHref(name){ alert(`跳转至${name}`); } } }
注：Vue.extend() 中的内容和 new Vue() 中的内容基本一样，也可以写 data 数据、methods 方法、计算属性等内容。它们的区别在于：
- 组件中不可以写 el ，因为所有的组件都要经过一个 Vue 实例管理，由 Vue 实例决定服务那个容器。
- 组件中的 data 必须写成函数，因为避免多次使用组件时，数据存在引用的问题（多个组件共用一块数据的问题）。
- 组件需要使用 template 配置结构内容，另外 template 中必须有一个最大的根元素包裹所有内容。
- 组件中可以使用 name 配置别名，常用于组件缓存过滤。
组件简写：const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象
组件使用流程【第一步：注册组件】
局部注册：利用 new Vue 的时候配置 components 选项
const vm = new Vue({ el: "#APP", // 第二步：注册组件（局部注册） components:{ // FrameHead: FrameHead, 名称相同时可以简写 FrameHead, FrameNav }, data(){ return { content: "网页内容" } } });
注：组件名是由注册组件时指定的，多个单词时可以用大驼峰命名 MyCode 或者短横线命名 my-code 。另外命名时尽量避免 HTML 中已有的元素名称，例如：h2、H2 都不行。
组件使用流程【第三步：使用组件】
v<div id="APP"> <!-- 第三步：使用组件 --> <frame-head></frame-head> <hr/> <!-- 第三步：使用组件 --> <frame-nav></frame-nav> <hr/> <p>{{content}}</p> </div>
注：使用组件就跟使用标签一样。如果是多个单词，需要使用短横线命名 my-code，在脚手架中也可以使用大驼峰命名 MyCode 。另外在脚手架中还可以写成单标签的格式，但是不使用脚手架时，写成单标签会导致后续的组件不能渲染。
组件使用流程【完整代码】
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue2非单文件组件使用流程</title> <script src="./js/vue.js"></script> </head> <body> <div id="APP"> <!-- 第三步：使用组件 --> <frame-head></frame-head> <hr /> <!-- 第三步：使用组件 --> <frame-nav></frame-nav> <hr /> <p>{{content}}</p> </div> <script> // 第一步：创建 frameHead 组件 const FrameHead = Vue.extend({ name: "fhead", // 定义别名 template: ` <div> <strong>{{title}}</strong> <span>{{username}}</span> </div> `, data() { return { title: "商城管理系统", username: "张三" } } }) // 第一步：创建 frameNav 组件【简写】 // const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象; const FrameNav = { template: ` <ul> <li v-for="(item,index) in list" :key="index" @click="isHref(item)"> {{item}} </li> </ul> `, data() { return { list: ["首页", "用户管理", "商品管理", "轮播图管理"] } }, methods: { isHref(name) { alert(`跳转至${name}`); } } } const vm = new Vue({ el: "#APP", // 第二步：注册组件（局部注册） components: { // FrameHead: FrameHead, 名称相同时可以简写 FrameHead, FrameNav }, data() { return { content: "网页内容" } } }); </script> </body> </html>
注：组件化开发的好处就是，每个组件只负责一块功能，并且每个页面都能使用这个组件，可以提高代码的复用性。另外在开发者工具中显示的是组件的 name 属性定义的名字。
原创作者：吴小糖
创作时间：2023.5.12
