Vue 爬坑之路(五)—— 组件进阶
组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。
一、基本用法
在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 <template> 中写好 HTML 代码,一个简单的组件就完成了
一个完整的组件,除了 <template> 以外,还有 <script> 和 <style>
需要注意的是,<script> 中的 data 必须是函数
然后在其他文件的 js 里面引入并注册,就能直接使用这个组件了
二、使用 slot 分发内容
开发过程中,常常需要在子组件内添加新的内容,这时候可以在子组件内部留一个或者多个插口 <slot>
然后在调用这个子组件的时候加入内容
添加的内容就会分发到对应的 <slot> 中
<slot> 中还可以作为一个作用域,在子组件中定义变量,然后在父组件中自定义渲染的方式
这个示例中,首先在子组件中添加 <slot>,并在子组件中定义了数组变量 navs
然后在父组件中以作用域 <template> 添加内容,其中 scope 是固有属性,它的值对应一个临时变量 props
而 props 将接收从父组件传递给子组件的参数 navs
三、动态组件
Vue 还可以将多个子组件,都挂载在同一个位置,通过变量来切换组件,实现 tab 菜单这样的效果
这样的功能可以通过路由 vue-router 实现,但路由更适合较大的组件,而且 url 会有相应的改变
Vue 自身保留的 <component> 元素,可以将组件动态绑定到 is 特性上,从而很方便的实现动态组件切换
上例中,当 tabView 的值改变,<component> 就会渲染对应的组件,和路由的效果十分类似,但是地址栏并没有发生改变
但这样一来,每次切换组件都会重新渲染,无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中,避免重新渲染
四、递归组件
当组件拥有 name 属性的时候,就可以在它的模板内递归的调用自己,这在开发树形组件的时候十分有效
上面是一个子组件,定义了 name 为 simple03,然后在模板中调用自身,结合 v-for 实现递归
为了防止出现死循环,在调用自身的时候,加入了 v-if 作为判定条件
父组件中调用的时候,需要通过 props 传入一个 tree:
最终渲染结果:
Vue 爬坑之路(五)—— 组件进阶的更多相关文章
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- vue爬坑之路(axios 封装篇)
第一步还是先下载axios cnpm install axios -S第二步建立一个htttp.js import axios from 'axios'; import { Message } fro ...
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
随机推荐
- UWP 应用程序内购
今天来说一下应用程序内购的问题,这里面有坑,给自己做个笔记,也给需要的人提个醒. 我目前的需要是可以允许用户捐赠赞助App的形式内购,最终效果如下 只讲上面的列表部分,下面的就是图片布局啥的,没意思了 ...
- Maven SpringMVC整合Mybatis
关于Spring的核心理念和Mybatis的优点网上已经有很多文档做了说明.这篇博客,只记录springmvc整合mybatis时常见的知识点,以及注意事项,它只有最精简的几个模块,以帮助初学者迅速搭 ...
- C++ size_t 和size_type的区别
为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned size_t是全局定义的类型:size_type是STL类中定义的类型属性,用 ...
- 运行期以索引获取tuple元素-C++14
在编译期很容易根据索引来获取对应位置的元素,因为 tuple 的帮助函数 std::get<N>(tp) 就能获取 tuple 中第 N 个元素.然而我们却不能直接在运行期通过变量来获取 ...
- 使用Dagger2做静态注入, 对比Guice.
Dagger 依赖注入的诉求, 这边就不重复描述了, 在上文Spring以及Guice的IOC文档中都有提及, 既然有了Guice, Google为啥还要搞个Dagger2出来重复造轮子呢? 因为使用 ...
- Android多线程研究(2)——定时器
先来看一段代码: public static void main(String[] args) { new Timer().schedule(new TimerTask() { @Override p ...
- Clang-Format: Visual Studio Style
PointerAlignment: Left UseTab: Never IndentWidth: 4 BreakBeforeBraces: Allman AllowShortIfStatements ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 46:illegal multibyte sequence
一. 最近使用python写入文件时,出现了如下的错误: 但是content的内容是unicode编码,不知道怎么和gbk扯上了关系,对content使用encode()和decode(),用gbk, ...
- 快收藏!高手Linux运维管理必备工具大全,你会吗?
一.统一账号管理 1.LDAP 统一管理各种平台帐号和密码,包括但不限于各种操作系统(Windows.Linux),Linux系统sudo集成,系统用户分组,主机登入限制等:可与Apache,HTTP ...
- [CSS]第一项和最后一项样式
列表项的第一项距离顶部0.2rem,最后一项距离底部0.5rem .item:first-child { padding-top: .2rem; } .item:last-child { paddin ...