1. 导语

承接上文：Vue 2.x 实战之后台管理系统开发（一）

在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。在开发过程中，会遇到一些常见的需求和问题，我整理了一下，有以下几点。

2. 常见需求

01. 父子组件通信

a. 父 -> 子（父组件传递数据给子组件）



使用 props，具体查看文档 - 使用 Prop 传递数据（cn.vuejs.org/v2/guide/co…

b. 父 -> 子（在父组件上调用子组件内的方法）


使用 ref，具体查看文档 - 子组件索引（cn.vuejs.org/v2/guide/co…<!--父组件 template--><div id="parent">  <!--子组件-->  <user-profile ref="profile"></user-profile></div>// 父组件  this.$refs.profile.someMethod();注意：如果在子组件上设置 ref 属性，则可以通过 this.$refs 获取到该子组件对象，如果在普通的 html 标签上设置 ref 属性，则获取到的是 Dom 节点。

c. 子 -> 父（在父组件上获取子组件内的数据）


// 父组件  let childData = this.$refs.profile.someData;

d. 子 -> 父（子组件内触发事件，父组件监听事件）



父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，具体查看文档 - 使用 v-on 绑定自定义事件（cn.vuejs.org/v2/guide/co…<!--父组件 template--><div id="parent">  <!--子组件-->  <user-profile @childTrigger="parentHandle"></user-profile></div>// 父组件  methods: {    parentHandle(params){        // 这个方法在子组件 emit childTrigger 事件后会执行        // params 为子组件里触发事件时传的参数    }}// 子组件 user-profile  this.$emit('childTrigger', params);

e. 子 -> 父（子组件传值，父组件里使用，具体实现见 03）

01总结：
应用场景示例：在父组件上打开侧边栏子组件，可以传 prop visible（true）来控制侧边栏打开；侧边栏内部有关闭按钮，就在点击关闭按钮后触发一个事件，父组件监听事件执行方法将 data visible 改为 false。
PS：父组件传值到子组件，传的值是 类型，子组件使用 v-model 可以修改该值（将某个表单元素的 v-model 设为该值），父组件可直接获取到改变后的值。

02. 全局函数

有时候会用到一些工具类函数，希望可以全局调用，而不是局限于某个组件中。

Step 1：
在 项目根目录/static/js/ 目录下新建一个 util.js 文件，将常用的工具函数写在这里面。

Step 2：
在 index.html 里面引入 util.js，就可以在 .vue 文件里使用那些方法了，如下：



<body>  <div id="app"></div>  <!-- 引入常用 js 方法 -->  <  type="text/ " src="/static/js/util.js"></ >   <!-- built files will be auto injected --></body>

02总结：
使用这个方法可以使得一些使用频率高的函数可以在所有 .vue 文件中被调用，笨拙而又简单。


03. slot

以前看文档时一直不理解如何使用 slot，现在用多了 elementui 的组件之后，就渐渐发现了它的实用性。
简单来说，使用 slot 可以使我们做到：在父组件里使用子组件时，在子组件里插入一些自定义的内容（html 代码啥的），具体查看文档：cn.vuejs.org/v2/guide/co…
更神奇的功能是 作用域插槽，可以让我们在父组件里使用子组件时，获取子组件传来的数据，具体查看文档：cn.vuejs.org/v2/guide/co…

简单应用示例：



<!-- a-button 子组件 --><button type="button" class="a-button" @click="$emit('btn-click')"><slot></slot></button><!-- 这里监听了 button 的 click 事件，然后又触发了 btn-click 事件 -->


<!-- 父组件 --><a-button @btn-click="handleClick">这里写的东西会覆盖子组件里的 slot 标签所在的位置</a-button><!-- 这里监听了子元素触发的 btn-click 事件，然后执行 handleClick 函数 -->

渲染结果：


<button type="button" class="a-button">这里写的东西会覆盖子组件里的 slot 标签所在的位置</button>

可以应用简单的 slot 来达到为不同的按钮填充文字的目的：


<a-button @click="handleClick">详情</a-button><a-button @click="handleClick">搜索</a-button><!-- 渲染结果 --><button type="button" class="a-button">详情</button><button type="button" class="a-button">搜索</button>

作用域插槽示例：


<!-- 子组件 --><div class="child">  <!-- slot 这个位置会在子组件被使用时被父组件传来的 html 代码覆盖 -->  <!-- slot 上的 text/child 就相当于传给父组件的 props (假设 name 为子组件的 data，name: someChild) -->  <slot text="hello from child" :child="name"></slot></div>

在父级中，具有特殊属性 scope 的 <template> 元素，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 prop 对象：

<!-- 父组件 --><div class="parent">  <child>    <template scope="props">      <span>hello from parent</span>      <span>{{ props.text }}</span>      <span>{{ props.child }}</span>    </template>  </child></div>

渲染结果：

<div class="parent">  <div class="child">    <span>hello from parent</span>    <span>hello from child</span>    <span>someChild</span>  </div></div>

03总结：
应用场景示例：elementui 的 button 组件中有简单插槽的使用，table 组件则使用到了 作用域插槽。

<!-- button 组件 --><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="text">文字按钮</el-button><!-- table 组件 --><el-table  :data="tableData">  <el-table-column    prop="zip"    label="邮编"    width="120">  </el-table-column>  <el-table-column    fixed="right"    label="操作"    width="100">    <template scope="scope">      <el-button        <!-- 可以通过 scope.$index 获取到当前行的索引 -->        @click.native.prevent="deleteRow(scope.$index)">        移除      </el-button>    </template>  </el-table-column></el-table>
04. router 使用小记
vue-router 的使用，简单来说就是通过配置，实现在不同的 url 路径下，页面渲染不同的组件。具体查看文档：vue-router 2。
使用示例
一级路由：

<!-- App.vue --><!-- 该组件为最高级父组件，使用 router-view 来根据路径确定要显示的子组件 --><template>  <div id="app">    <!-- router-view 位置用来显示组件，如显示下面的 index.vue -->    <router-view></router-view>  </div></template>

二级路由（路由可嵌套）：

<!-- page/index.vue --><!-- 该组件包含一个顶部栏和侧边菜单栏，内容区使用 router-view 来根据 url 路径显示子组件 --><template>  <div class="index">    <!-- 顶部导航条 -->    <header class="main-header">      ...    </header>    <!-- /顶部导航条 -->    <!-- 侧边导航栏 -->    <aside class="main-sidebar sidebar-gradient">      ...    </aside>    <!-- /侧边导航栏 -->    <!-- 根据页面一级菜单的点击而进行切换的内容区 -->    <transition name="fade">      <!-- router-view 位置用来显示组件 -->       <router-view></router-view>    </transition>    <!-- /内容区 -->  </div></template>

router 配置：

// router/index.jsimport Vue from 'vue';import Router from 'vue-router';// 引入组件import index from 'page/index'; // 该组件包含一个顶部栏和侧边菜单栏，内容区使用 router-view 来根据 url 路径显示子组件import notFoundComponent from 'page/404'; // 该组件为 404 页面，当你路由使用 history 模式时需要用到import monitorIndex from 'page/monitor/index'; // 该组件为一个监控页面，用于显示在 page/index.vue 页面上的 router-view 处（即页面的内容区域）Vue.use(Router);// 定义 scrollBehavior 方法const scrollBehavior = (to, from, savedPosition) => {  if (savedPosition) {    return savedPosition  } else {    return { x: 0, y: 0 }  }}export default new Router({  mode: 'history',  // mode 默认 hash 值，但是 hash （url中包含 # 符号）不太好看也不符合我们一般的网址浏览习惯  // 当你使用 history 模式时，URL 就像正常的 URL，例如 http://yoursite.com/user/id，也好看！   ActiveClass: 'active',  // 默认值: 'router- -active'，就是当前组件被激活，相应路由会自动添加类 'router- -active'，这里是为了全局设置激活类名，如果不设置，直接用默认的也是可以的  // 如：使用 router-  组件来导航，通过传入 `to` 属性指定链接  // <router-  to="/foo">Go to Foo</router- >  // <router- > 默认会被渲染成一个 `<a>` 标签，'/foo' 路由下的组件显示时，该 a 标签上会自动添加类 'active'  scrollBehavior: scrollBehavior,  // 通过这个属性（是个函数），可以让应用像浏览器的原生表现那样，在按下 后退/前进 按钮时，简单地让页面滚动到顶部或原来的位置，如果不设置，则组件切换时滚动条位置不变  routes: [    {      // 一级路由      path: '/',      component: index,      children: [        // 二级路由        // -----------默认首页-------------        // 当 / 匹配成功，monitorIndex 会被渲染在 index 的 <router-view> 中        { path: '', component: monitorIndex, alias: 'index.html' },        // 这里的 alias 'index.html' 为当前页面的别名        // http://localhost:8080/index.html 等同于 http://localhost:8080/         // -----------监控中心-------------        {          // 当 /monitor 匹配成功，          // monitorIndex 会被渲染在 index 的 <router-view> 中          path: 'monitor',          name: '监控中心',          component: monitorIndex        }      ]    },    // 同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高    // 因此下面的路由配置为备用，如果某个路径未被配置显示相应的组件，则显示 404 页面    { path: '*', component: notFoundComponent }  ]});

引入 router 配置：

// main.js import Vue from 'vue';// 引入 element ui 组件import { Dropdown, DropdownMenu ...} from 'element-ui';// 引入 App.vueimport App from './App';// 引入 router 配置import router from './router'; // 默认会找到 router 文件夹下的 index.js 文件// 引入项目图标的 sprite css，可以简单的通过这种方式引入 css 文件import './assets/css/sprite.css'// 使用 element ui 组件Vue.use(Dropdown)Vue.use(DropdownMenu)...new Vue({  el: '#app',  router, // 使用 router 配置  template: '<App/>',  components: { App },});

引入 router 配置：


// main.js import Vue from 'vue';// 引入 element ui 组件import { Dropdown, DropdownMenu ...} from 'element-ui';// 引入 App.vueimport App from './App';// 引入 router 配置import router from './router'; // 默认会找到 router 文件夹下的 index.js 文件// 引入项目图标的 sprite css，可以简单的通过这种方式引入 css 文件import './assets/css/sprite.css'// 使用 element ui 组件Vue.use(Dropdown)Vue.use(DropdownMenu)...new Vue({  el: '#app',  router, // 使用 router 配置  template: '<App/>',  components: { App },});

04总结：
关于 vue-router 的使用，看文档一般都能解决你的疑问，vue-router 2。
其他参考文章：Vue.js系列之vue-router(中)（4）
PS：使用 history 模式的话，还需要 后台配置 支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404（因为的确找不到该页面），这就不好看了。并且在后台配置后，还需要前端来提供 404 页面，我上面的示例代码中有提到，可供参考。

05. 测试接口
使用 Vue 开发单页应用时，前后端分离开发，进度不一。因此前端有时候就需要自己模拟接口的 json 文件，然后直接使用异步请求方法（如 ajax） 去获取数据，渲染页面，测试代码等。
Step 1：
在 项目根目录/static/api/ 目录下新建一个 test.json 文件，写入模拟的接口数据：

{  "status": true,  "data": {    ...  }}

Step 2：
在 .vue 组件文件里任意需要请求数据的方法里（如 created 钩子，或者某个 methods 方法里）编写相关代码：

let vm = this;// ajax 请求数据$.ajax({    type: 'GET',    url: 'static/api/test.json',    data: '',    beforeSend: function() {      // 显示 Loading      vm.loading = true;    },    complete: function() {      // 隐藏 Loading      vm.loading = false;    },    success: function(data) {      // 处理返回数据      ...    },    error: function() {      // 数据请求失败，给用户适当的反馈信息      ...    },    dataType: 'json'});

05总结：
在后端尚未提供接口时，我都是用这个方法来测试前端获取数据和处理数据的代码是否正确。
3. 零碎问题
01. prop 传值小技巧
我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时，这很有用。
示例如下：


  props: {    // 基础类型检测 （`null` 意思是任何类型都可以）    propA: Number,    // 多种类型    propB: [String, Number],    // 必传且是字符串    propC: {      type: String,      required: true    },    // 数字，有默认值    propD: {      type: Number,      default: 100    },    // 数组／对象的默认值应当由一个工厂函数返回    propE: {      type:  ,      default: function () {        return { message: 'hello' }      }    },    // 自定义验证函数    propF: {      validator: function (value) {        return value > 10      }    }  }

愚蠢的我每次想要传 Number 或者 Boolean 类型的值到子组件时，都在父组件里定义好值，然后再绑定到子组件上：

// 这样会报错，因为 show type 为 Boolean，rows type 为 Number// 默认情况下直接传值，子组件接收到的都是 String 类型// template<child show="true" rows="6"></child>// 于是我这样做：// template<child :show="show" :rows="rows"></child>//  show: true,rows: 6// 实际上可以直接这样做：// template<child :show="true" :rows="6"></child>// 官网如是说：如果想传递一个实际的 number，需要使用 v-bind ，从而让它的值被当作   表达式计算。

小技巧：当某个 prop 类型为 Boolean 时，可以直接把该 prop 的名称写在组件上，默认会传 true，不写的话默认为 false。比如 <child show :rows="6"></child> 这么写，子组件内部就能收到 show 为 true。
02. autoprefixer
有些人会问如何在项目里使用 autoprefixer 插件，事实上使用 vue-cli 的 webpack模板生成的项目里已经带有 autoprefixer 的使用了，如下图：
5d0e225634b02f4e43b4532a6d83a88433e0952e
03. build 时不生成 .map 文件
对项目进行 npm run build 操作后，发现生成的文件超大（比想象中的大），尤其是那些 .map 文件，不过，我们可以通过配置选择不生成该类文件。

// 项目根目录/config/index.jsvar path = require('path')module.exports = {  build: {    ...    productionSourceMap: false, // 将该值设为 false，就不会生成 .map 文件了    // Gzip off by default as many popular static hosts such as    // Surge or Netlify already gzip all static assets for you.    // Before setting to `true`, make sure to:    // npm install --save-dev compression-webpack-plugin    productionGzip: false,    productionGzipExtensions: ['js', 'css'],    ...  },  dev: {    ...  }}

4. 总结
一句话，有空多看文档，可以避免很多实践中的问题。
原文发布时间为：2017年04月16日
原文作者：掘金
本文来源：掘金 如需转载请联系原作者
 












                                                            					


					

						
继续阅读与本文标签相同的文章

						

																												None
							
						

					

				

				
				

					
					
				

			
				

					

						最新文章
						最热文章
						
					

					

						

							
							
							
							
						

					

				

				

					  收藏 
					 
						打印 
				

			

			

				
				

					
 特别推荐  
					2026年06月02日 星期二 

					

						
						
					

				

				

					
 精彩发现 

					

						

							
  热门标签 

							

																									阻止表单提交
																	窗口
																	关闭浏览器
																	清除
																	CDATA
																	css文件
																	光标位置
																	坐标
																	javascrpt
																	!important
																	超链接
																	数字
															

						

					

				

				

					
 相关文章 

					

																																				

							
								

								

								

									
 1 

									JavaScript编码风格指南									
506人阅读

								

							
						

																								

							
								

								

								

									
 2 

									7天自动收货，30分钟不支付订单自动取消是如何实现的？									
801人阅读

								

							
						

																								

							
								

								

								

									
 3 

									前端基础（一）：js数据类型									
1775人阅读