分分钟玩转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">

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

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

运行结果如下：

CURD示例

Vue.js组件的API来源于三部分——prop，slot和事件。

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

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

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

至此，这三部分我都已经介绍完了，接下来我就用这些知识来教大家一步一步完成一个CURD示例。

第1步——

创建表格组件，添加查询和删除功能

创建表格组件，添加过滤，数据删除功能

Search

<template id="grid-template">
<table>

Delete

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

使用知识点

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指令的缩写