分分钟玩转Vue.js组件（二）

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了分分钟玩转Vue.js组件（二），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<p style="text-align: left"><style type="text/css">
.btn-demo {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
background-color: #19b586;
text-decoration: none;
border: none;
border-radius: 4px;
color: #fff !important;
text-decoration: none !important;
cursor: pointer;
display: inline-block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-shadow: rgba(35,69,90,0.51) 0 -1px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 2px;
Box-shadow: 0 2px 2px #cddbe2;
-webkit-Box-shadow: 0 2px 2px #cddbe2;
-moz-Box-shadow: 0 2px 2px #cddbe2;
-moz-transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
margin: 10px;
padding: 5px 20px;
}

.btn-demo:hover {
background-color: #e05326;
color: #fff;
text-decoration: none;
}

概述

上一篇中我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”

今天我们将着重介绍slot和父子组件之间的访问和通信，slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件，它用于组件之间的通信。

本文的主要内容如下：

  • 组件的编译作用域
  • 在组件template中使用标签作为内容插槽
  • 使用$children,$refs,$parent 实现父子组件之间的实例访问
  • 在子组件中，使用$dispatch向父组件派发事件；在父组件中，使用$broadcast向子组件传播事件
  • 结合这些基础知识，我们一步一步实现一个CURD的示例

Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！

注意：以下示例的组件模板都定义在

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

$refs示例

$parent示例

下面这段代码定义了两个组件：child-component和它的父组件parent-component。 在子组件中，通过this.$parent可以访问到父组件的实例。

<template id="parent-component">

<template id="child-component">

This is a child component

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

注意：

尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为： 1.这让父组件与子组件紧密地耦合； 2. 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

自定义事件

  • 使用 $on() 监听事件；
  • 使用 $emit() 在它上面触发事件；
  • 使用 $dispatch() 派发事件，事件沿着父链冒泡；
  • 使用 $broadcast() 广播事件，事件向下传导给所有的后代。

派发事件 下面这段代码是一个简单的事件派发处理

Messages: {{ messages | json }}

<template id="child-component">

我们将这个示例分为几个步骤解读：

1、子组件的button元素绑定了click事件，该事件指向notify方法 2、子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数 3、父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

运行结果如下：

广播事件

下面这段代码是一个简单的事件广播处理

<template id="child-component">

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

403_8@

使用知识点

1. 使用Vue.component语法糖

Vue.component是创建并注册组件的语法糖，使用Vue.component注册的组件是全局的。

2. 使用prop将父组件数据传递给子组件

#app元素是父组件，simple-grid是子组件。

在simple-grid组件中定义选项props: ['dataList','searchKey'] 在#app下使用

3. 使用过滤器

{{ col.name | capitalize}}使用了，将字符串的首字母转换为大写后输出。 filterBy filterKey使用了，根据指定条件过滤数组元素，filterBy返回过滤后的数组。

4. 使用数组索引别名

数组默认的索引名称为$index，v-for="(index,entry) in dataList使用了。 括号中的第一个参数index是$index的别名，第二个参数是遍历的数组元素。

5. 使用了v-bind和v-on指令的缩写

modal-dialog组件在simple-grid组件中注册：

}
}
}
}
// ...已省略
})

由于modal-dialog组件是simple-grid的子组件，所以它应该在simple-grid的template中使用：

modal-dialog组件的props选项，追加了3个元素：

元素

使用知识点

1. 使用组件的局部注册

modal-dialog组件没有使用Vue.component进行全局注册，使用simple-grid组件components选项实现了局部注册。

2. 使用组件的data选项

组件的data选项必须以函数的方式返回。

第3步——

实现数据新建功能

1. 修改Vue实例的data选项的columns：

为'name'列追加一个isKey属性，并设置为true，表示该列为主键列。 为'sex'列追加一个dataSoruce属性，并设置为['Male','Female']，表示新增或修改数据时选择性别的下拉框数据源。

2. 修改modal-dialog的template:

<footer class="form-group">

在modal-dialog组件的模板中遍历fields，然后显示field的名称。 在渲染表单时，根据是否有dataSource判定表单是下拉框还是文本框。 （由于示例较为简陋，所以只提供了input和select两种表单类型）

注意modal-dialog组件的fields是由Vue实例传递给simple-grid，然后再由simple-grid传递过来的。

3. 修改simple-grid的template

<modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem">

添加一个Create按钮，绑定click事件到openNewItemDiaolog()方法，该方法用于打开modal-dialog组件，并将模式设置为新建模式。 在标签上给sample-grid绑定一个自定义事件create-item，后面在$dispatch派发事件时会用到。

4. 修改simple-grid的methods选项

openNewItemDialog: function(title) {
// 对话框的标题
this.title = title
// mode = 1表示新建模式
this.mode = 1
// 初始化this.item
this.item = {}
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
this.$broadcast('showDialog',true)
},createItem: function() {
// 将item追加到dataList
this.dataList.push(this.item)
// 广播事件，传入参数false表示隐藏对话框
this.$broadcast('showDialog',false)
// 新建完数据后，重置item对象
this.item = {}
},deleteItem: function(index) {
this.dataList.splice(index,},// ...已省略
})

追加了两个方法：opeNewItemDialog和createItem方法。

opeNewItemDialog方法用于打开对话框，this.$broadcast('showDialog',true) 调用子组件modal-dialog的showDialog事件，传入参数true表示显示对话框。

createItem方法用于保存新建的数据，this.$broadcast('showDialog',false) 调用子组件modal-dialog的showDialog事件，传入参数false表示隐藏对话框。

5. 修改modal-grid的methods和events选项

调用simple-grid的create-item方法 this.$dispatch('create-item') } } },events: { // 显示或隐藏对话框 'showDialog': function(show) { this.show = show } } } } // ...已省略 })

修改methods选项的save方法，由于保存按钮是在子组件modal-dialog中的，而createItem方法是在父组件simple-grid中的，所以这里使用this.$dispatch('create-item') 派发到父组件的自定义事件create-item。

追加events选项，添加showDialog事件，用于显示或隐藏对话框。

请将4和5结合起来看，我们既用到了$broadcast广播事件，又用到了$dispatch派发事件。 下面这幅图有助于理解simple-grid和modal-dialog组件之间的通信：

create-item是一个自定义事件，由子组件modal-dialog调用this.$dispatch('create-item') 派发到自定义事件create-item，自定义事件create-item是绑定在父组件simple-grid上的，该事件会执行createItem方法。

第4步——

实现数据修改功能

1. 修改sample-grid的template

{{entry[col.name]}} 502_284@

遍历列表数据时，使用v-if指令判断当前列是否为主键列，如果是主键列，则给主键列添加链接，然后给链接绑定click事件，click事件用于打开修改数据的对话框。 在标签上，给sample-grid绑定自定义事件update-item，update-item事件指向sample-grid的方法updateItem。

2. 修改modal-dialog的template

{{ field.name }}

在修改模式下（mode = 2），如果当前字段是主键字段，则禁止修改。

3. 修改sample-grid的methods选项

修改数据的对话框时，使用对象的深拷贝 initItemForUpdate: function(p) { var c = c || {}; for (var i in p) { // 属性i是否为p对象的自有属性 if (p.hasOwnProperty(i)) { if (typeof p[i] === 'object') { c[i] = Array.isArray(p[i]) ? [] : {} deepCopy(p[i],c[i]) } else { // 属性是基础类型时，直接拷贝 c[i] = p[i] } } } return c; },findItemByKey: function(key){ var keyColumn = this.keyColumn for(var i = 0; i < this.dataList.length; i++){ if(this.dataList[i][keyColumn] === key){ return this.dataList[i] } } },false) // 新建完数据后，重置item对象 this.item = {} },updateItem: function() { // 获取主键列 var keyColumn = this.keyColumn

for (var i = 0; i < this.dataList.length; i++) {
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]
if (this.dataList[i][keyColumn] === this.item[keyColumn]) {
for (var j in this.item) {
this.dataList[i][j] = this.item[j]
}
break;
}
}
// 广播事件，传入参数false表示隐藏对话框
this.$broadcast('showDialog',false)
// 修改完数据后，重置item对象
this.item = {}
}

追加的内容：调用内置的ready()函数，openEditDialog、updateItem、findItemByKey和initItemForUpdate方法。

ready()函数会在编译结束和 $el 第一次插入文档之后调用，你可以将其理解为jQuery中的document.ready()。 在ready()函数中，初始化keyColumn，keyColumn表示主键列，调用updateItem方法时，会根据主键数据找到dataList中匹配的元素。

opeEditItemDialog方法用于打开对话框，this.$broadcast('showDialog',true) 调用子组件modal-dialog的showDialog事件，传入参数true表示显示对话框。

ready()函数没有特别的业务逻辑，主要是获取主键列，调用updateItem方法时，会根据主键数据找到dataList中匹配的元素。

updateItem方法用于保存修改的数据，this.$broadcast('showDialog',false) 调用子组件modal-dialog的showDialog事件，传入参数false表示隐藏对话框。

initItemForUpdate方法用于将选中的数据this.dataList[index]深拷贝到this.item。为什么要使用深拷贝呢？因为this.dataList[index]是一个引用对象，它有一些属性也是引用类型的，如果使用浅拷贝可能得到一些超出预期的效果。

4.修改modal-dialog的methods选项

调用simple-grid的create-item事件 this.$dispatch('create-item') }else if(this.mode === 2){ // 使用$dispatch调用simple-grid的update-item事件 this.$dispatch('update-item') } }

修改methods选项中的save方法，this.mode === 2时，将事件派发到父组件的update-item事件。

第5步——

修改数据新建功能

修改sample-grid的methods选项，追加itemExists方法，然后修改createItem方法。

}

由于主键列数据是不能重复的，所以在新增数据时需要判断主键列数据是否已经存在。

总结

说到底，组件的API主要来源于以下三部分：

prop 允许外部环境传递数据给组件；

事件 允许组件触发外部环境的 action；

slot 允许外部环境插入内容到组件的视图结构内。

这三大知识点在上下两篇文章中都体现出来了，限于篇幅和个人知识的匮乏，我并不能将组件的所有特性都描述出来，这还需要靠各位花一些时间去多多了解官网的API，并付诸实践。

如果要构建一些大型的应用，基于组件的开发模式是一个不错的选择，我们将整个系统拆分成一个一个小组件，就像乐高一样，然后将这些组件拼接起来。

本文已被整理到了《》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

组件组件组件

猜你在找的Vue相关文章

elementui的el-tree第一次加载无法展开和选中的问题
问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...
VSCODE打开一个文件，另一个文件就关闭的问题的解决方法
因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。 可以通过双击...
一文带你学会国产加密算法SM4的vue实现方案
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...
解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_esl...
vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
问题产生 在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...
element-UI中手动调用table排序
&amp;lt;el-table :data=&amp;quot;tableData&amp;quot; &amp;quot;width...
Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...
Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...
Vue-router插件使用
单页面原理 Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更...
Vue 分支循环
v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。 如果数据是对象类型...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作