分分钟玩转Vue.js组件(二)
<p style="text-align: left"><style type="text/css"> .btn-demo:hover { 概述上一篇中我们重点介绍了组件的创建、注册和使用,熟练这几个步骤将有助于深入组件的开发。另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:“嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信,slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信。 本文的主要内容如下:
Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!
注意:以下示例的组件模板都定义在标签中,然而IE不支持标签,这使得在IE中标签中的内容会显示出来。解决办法——隐藏标签 个浏览器对标签的支持情况,请参见: 编译作用域尽管使用组件就像使用一般的HTML元素一样,但它毕竟不是标准的HTML元素,为了让浏览器能够识别它,组件会被解析为标准的HTML片段,然后将组件的标签替换为该HTML片段。 <template id="myComponent"> {{ msg }}这段代码运行结果如下: 第一个 第二个
指定名称的slot 上面这个示例是一个匿名slot,它只能表示一个插槽。 如果需要多个内容插槽,则可以为slot元素指定name属性。多个slot一起使用时,会非常有用。例如,对话框是HTML常用的一种交互方式。 在不同的运用场景下,对话框的头部、主体内容、底部可能是不一样的。 这时,使用不同名称的slot就能轻易解决这个问题了。 <script src="js/vue.js"> 在定义modal-dialog组件的template时,我们使用了3个slot,它们的name特性分别是header、body和footer。 在 <header class="dialog-header" slot="header">
<h1 class="dialog-title">提示信息 <div class="dialog-body" slot="body"> 你想在对话框中放什么内容都可以! 你可以放一段文字,也可以放一些表单,或者是一些图片。 <footer class="dialog-footer" slot="footer"> <button class="btn btn-open" @click="openDialog">打开对话框 对话框的标题内容、主体内容、底部内容,完全由我们自定义,而且这些内容就是一些简单的HTML元素!
如果需要定制对话框的样式,我们只需要在
然后修改一下Vue实例,在data选项中追加一个dialogClass属性,然后修改openDialog()方法:
虽然我们在modal-dialog组件中定义了3个slot,但是在页面中使用它时,并不用每次都指定这3个slot。 比如,有时候我们可能只需要header和body: <div class="dialog-body" slot="body"> 你想在对话框中放什么内容都可以! 你可以放一段文字,也可以放一些表单,或者是一些图片。 现在看到的对话框是没有底部的,只有标题和主体内容。
多个slot同时使用的场景还有很多,例如:用户的注册、登录、找回密码等这些表单集合,也可以用一个组件来完成。 父子组件之间的访问有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件。 针对这几种情况,Vue.js都提供了相应的API:
$children示例下面这段代码定义了3个组件:父组件parent-component,两个子组件child-component1和child-component2。 在父组件中,通过this.$children可以访问子组件。 this.$children是一个数组,它包含所有子组件的实例。 <template id="parent-component"> |
<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指令的缩写 modal-dialog组件的模板内容:第2步——
创建对话框组件
表格数据的添加和修改,我们使用模态对话框来实现。
模态对话框有两种模式,新建模式和修改模式,分别用于新建一条数据和修改指定的数据。
由于对话框的内容来源于具体的数据,所以我们可以考虑将对话框作为simple-grid组件的一个子组件。