首页 技术 正文
技术 2022年11月14日
0 收藏 303 点赞 4,232 浏览 13974 个字

组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。

一、基本用法

在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 <template> 中写好 HTML 代码,一个简单的组件就完成了

Vue 爬坑之路(五)—— 组件进阶

一个完整的组件,除了 <template> 以外,还有 <script> 和 <style>

需要注意的是,<script> 中的 data 必须是函数

Vue 爬坑之路(五)—— 组件进阶

然后在其他文件的 js 里面引入并注册,就能直接使用这个组件了

Vue 爬坑之路(五)—— 组件进阶

Vue 爬坑之路(五)—— 组件进阶

二、使用 slot 分发内容

开发过程中,常常需要在子组件内添加新的内容,这时候可以在子组件内部留一个或者多个插口 <slot>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAC8CAIAAAD98SLnAAARmElEQVR4nO2dvY7buBqG91qMwBIWQYC5gRmc5pxinMJFipneCGBgg2ARp007xSLApPIFDAIESJfK1XRB6lRjbJciF5DK6U5BSSYpkiIl0aI0D/AUiUc/pCy+fvlJ/L4/snwGABCVPwZvAQBMHoQGAKKD0ABAdBAaAIgOQgMA0UFoACA6CA0ARGdcQnO+m//9u2SXDd4eAPCitdCcbed//54vloO0O7tqJTSDthngEYPQAEB0/IRm+eHh8H27lD98VEJzud3/etheDv5tAYyUZqFZbr8fDr8Ou9fFf7PVbylQInG1Oe4lB1NW20oRssV+vtpmxV93WXW0YvBvin/Lu58bWmUTmmyxNwVxOrXZdBEAIIgGodnsfh0Oxh9zhzsQI7YQiGW2Oo7bbLGfr/bz1TYTu6/283NZNTaaRmRXv+d/77Mz/RRmoTnfSe3ZGALGrdpc8fbL4fDrsP/AzAsgFIfQvN4dfh30GVOFddBudKcgtjzP8spxnJebrbZZ8aEsNJI6WM7iM3XKFntdpFq1WWb54eHw63D4snGcFwBqWISmeUTZBq1iDQSbaktdU642tg+Vfa/0ZnjFaM53vkLjbLOOW38BwIBZaMSMqYPQWKIh4UKzzFb+QlOPxYQIjTuCUyGEhngNQACNU6dfu7fGvwa4gyMxHY1QGenDTo7GDFMngFb0Hwy2TzpaCI0lVmIQGrGl/hQpJEbT9NibYDBAW4Ifbx8/1x1EiRTxNf7JX2iOAWP9OAZHo2xcPufWnli1abPzIgCAD61f2JtlekzE9k6KNOC9hEZGdRnZlSmSUimR9iLM2db0aDy4zfmMF/YAOpLWokpzRAYARg5CAwDRQWgAIDoIDQBEJy2hAYBJgtAAQHQQGgCIjkFo/vu//wzeLACYEjgaAIjO4I6mviJpVr6ka1p8AAAjZHBHg9AATJ80HQ0ATIr4jsayILOkR6Fh6SNAosR1NJbsCo510tZalOYMD2q+CJI5AKRJREdjTpqlZ36xOBpDxhlbZl91yQLpqQDSI5KjsWbwruWy8xeaeh4sy74k3ARIjAiOxjXO664kQGi0Cirm6ksF1CoASIj+HY2zgkJdVkKERkn6a0knXECtAoCEiBSjsVVQ6Cg04nO97JwOUyeAxIj41MkUDNZtiHiWFCA0pTAts5W5bgHBYID0iPseTf15sxxYEcXhwhyNcy8ebwOkSfw3g2sv7EmlDs6FxzlKRkOdA7GNeEBeDwPzwh5Aogy+1gkAps/ga50AYPrgaAAgOjgaAIgOjgYAooOjAYDo4GgAIDo9OxrcEADUwdEAQHQem6OJlz5ijIkpYrS5XDdvXlULg3C53Q+8APCxORrH0Or4ZSA0Km+/IDSd6Ukglh8ehv4uHpujcTC86k8KhKYH+rknN7vhb+y0HU1DBQXDt9JhUSVC0ysITQ9435OukfJ6V0/d3XTS3hcnp+to6jkfynzDcqWEc/cu2uU2xg6KvQx4ps5qjEpcbvfVBoHzlCKJV7uQh+O89jYXt+wxdVlxfcrbvfx5lI5gvOBWoZFPHT5rUy6I9gVZOtVDj6yXK3BfNY2Bfd+ge9KdHWW5/a7t1W0ctSRRR2OsoLDRyrBkV4akWY2Jr6wDoLOjMR/59U5pz+V253+K1zupPeKaeGuN33nrbV5+eDh8f9h/3y7FBfn+sHstb1amai33evvFUOvCfTWU4RSgNWIASOd6vasGg9oMZcuOPXIc2bKv1GtXf5v29bonzbVGtCOoktHPOAokQUfjrqAgZ8OSUwhLuFN5nlholh8ewoyrnaBDeW5sFpri1tzsyi9CiibW9M5y3UxXY7PTvhfDMGjVI0Mbjufq1CPnkQ37Ksri7q97X4970iOW//ZLfYN+xlEgiTkaZ9/qVZwMdZ0av4NBHE0/WhM02fY7r0VopBF4HKv6h9W3UPvEcjXqAykgTumyPyYNOm7fpUfuIxv2lfvY0F/nvk33pJcKmHfvZxwFkpajcVZQMFwOkdbTfoFMv5anFppZlxhNfa4eGtVrOG8fQlOPAliuhhLpcMcdLPeGZUvj49vqx7xLj9xH9hEae3+7CI17pLguS1/jKJDEHI3UN58LZFbipKZOhob5xlmEymjWuo0zcpx3aEfjzzQcTWY8i/X6+EydrLeTTZr7GUeBpOVo1GtkDAbLl8NU2im5YLDhy/MTC+FH9Bux5RTMdt4ehMYSZ7HFaFpfYdflNYU8q3N16pHzyE1i4e5vZ6GpDmK8K6x3Sz/jKJAEHU2B5fH28QLVKuT6PZaz3681BxGI8chvvyhFIEKesxwjl/nRlfgKjed5OwuN0sjGqyHFZVtgiJ46nzoVW3bskePIjWLh7K+H0Hjdk8bb3nGn9TOOAknU0Ujfk/Q4UK+OoMXJnS8aCYXW0b8JNSbiZxqbjqweMyhGo72CEfYmleu8jjZ7DUsJ7Uev+TrrkYsgj+b6gpRTS3/q2CPHkb3EwtpfH6HxvSf1F/Zcj/M6jaO2pOtoLBfIGLKCE34LjqDsOJlej4xPtY/9HWIcpe1oErhAoH8LkxuWk+tRQ2QnFaFJFoQmBSY3LCfYo4b+JiI0OBpwfQuTG5bT61FDfxMRGgCAfhmTowGAkYKjAYDo4GgAIDo4GgCIzpQcjZwxTE63kRRBK6pG0SOAZqboaLKrVsPSkv6nX9rlo0+5RwAeTMnRlCQ8LFsuX064RwA+pO1owqoglPQ/LEOWmfWZjz6NHgF0Jl1HY1mrLgaPQFnbfsQ6LM0hj2W2+q2vZxUc3570XDgfmo8+/R4B9EKijsaSzkeMq+on+mxr/Lk2Dks11bsYimrm96aJRlMqoBb56BPvEUBfJOho7PmQs8W+XheijmFYGoacJc+YM6JhTW7YMh99wj0C6JPEHE3DfV/MFBpGZn1YmsbzMlupUxXP0GlNUzrko0+0RwB9k5aj8cjt3iqikS325qlH62GpV+dpl48+zR4B9E5ijiafNeZ2L8gWe9trbPF+/xumTsH56BPuEUCfpOVoKpoCq7Mstwc4rBENJc/7Rh+E8YLB3k+1E+sRQF8k6GgKDM9fsyt5aNV+wOXNvJ7RaNsYP7Q2xrPN7soHyfcIoBcSdTQFtZff1DdE1DGZXZneHJG2UTYwZxhTj19t0+WFvYby0iPoEUBn0nU0E8GZjx7gkZC2oxk9natfAkwCHA0ARAdHAwDRwdEAQHRwNAAQHRwNAEQHRwMA0cHRAEB0puRoqBkgc/H53zc//335/nKWra9//vvm5/3zResjJNQqT6g2kRZTdDSk8s5nWX72/r4c0pfPv6UiNN1b5QfVJhJjSo6mhNsln5VD+vpVXg7pu4uhm3S6VlFtIjXSdjSpVEEYJa/uyiEtvEkSQuNuFdUmJku6jiapKggOXnx69vFrfpHP3/149lHwaa5ss8hvqz/9ePbuL/nzp+tFseO7v2YX/zz9+EMcrdpdOuyPp+tFDxf2/b15wvLqrvpcTJoKPq/rBxHGRFCfW8m7h828qDYxVRJ1NClWQbDw4pOqIH/9qahJPn8nCYfYuPjrIr/98fT269P14sn667OPX5/efpqru8/fSbJ18c/TXrRGEhSZs/f3NdezvjYJzcVnJbZy9v5OPpriUxY3L4OjPFSbmCIJOpqEqyCYULQjn2nqoLPIb388u/3nSfVvseWLT6VhWeS35dFefHr28cefL467P1l/rY58ud2LXMU6jRHQxc3LcvKiu5hvN+q1NQrN5fNv9S1LpJlRcVUN+tUI1SYmR2KOZgRVEHRqcuAUmnz+ThUaXVOOHxqOU07Tul3k9XXpMsQc5xgx8RKacmZk0hpDMMhioBqh2sSkSMvRjKEKgk6j0BSRF4kAoTEgn6sVl8+/CflYX/+8v/58/+bzWvpQ3tIsNDN7jEYJ7kjIHscTqk1MisQcjfR9pFgFwYRbaITKaBOr1o5Gov3UScjB5/VscfPy283Z4ublz7uL7PL5t3owxSo0JeIR9XGbnh5vUW1icqTlaCpSrIJgwSk0T9ZfDX/1E5qeJkoGzt7fv/l2c/H+vnpx7vrV+trgOxqFJtdDNm0nShJUm5giCTqagqSqIDhwO5pjlDc/Puf2FBo5Wtwvr+7eSK//l/OgukAYhWZ9LXsW/blSt9fwqDYxVRJ1NAWpVEFw0RSj0V6EebL+6i00+u6SSHVjcfNSjuaK/x7VQaxC0jmqSbG913s0trCxEapNTJZ0HQ1AAFSbSJu0HQ2AF1SbSB0cDQBEB0cDANHB0QBAdHA0ABAdHA0ARAdHAwDRwdEAQHSm5GjIZS9zsnoDY2wzNRJOzRQdDTmD89np6g2Msc3USDg5U3I0JdwQ+SzVKghJtJkaCacnbUdDFYQOpFkFoUObqZEwYtJ1NFRByPLZMFUQyiRY0iptbYm2tUxCeRBpA03gylxZPy1HCL8lwjajRsIgJOpoqIJQ7DtIFYRKCwqNOFO0aX1dTzGhJL6StUPLaKNkyZIiMv7tp0bCOEnQ0VAFYegqCLX4iJTd6qxuiOTKB0JoJIeizID0Ggk+GfzqUCNhhCTmaKiCkEIVBGOicoGp1oqcZK9WbiWC0OQzaiSMjrQcDVUQkqiC0CQ0pmIJXkJjmjq1KJAwo0bC6EjM0UhXnCoIg1VBiOZoaklCW6kMNRJGSFqOpoIqCNmAVRAcQmOqPClHl51C06pqpQY1EsZJgo6mgCoIg1VBcAmN+alTtXFYjKb7LeG9GTUShiVRR1NAFYRBqiC4hSbXZkCKcDRMnUylLL2DwdRIGDHpOhqYHPJDroJXd+Gv0rSAGglDk7ajgSlhWr6kzbziQI2E4cHRwMmoOZriFeT2URsYCzgaOCVl4Nm2EgomCo4GAKLTs6MBAKiDowGA6OBoACA6OBoAiM7gjsb9jsP5zrDqRCzqtyyxBYD0GNrRNOSjR2gApsDAjqYpH71RaABgZMR3NJ3y0fcoNI9oARtAasR1NK3y0Ss55dUEi9aageaV+Oq6/sezJB8gNSI6mjb56Iv8ZlVyEIujMWQGERpUT0GkLtt/HEmGAFIjkqNpmY++lp3MX2jEvnKE2LLvI0ibCJAaERxN+3z0dVcSIDRaBkZrnrR8NvmM8wCp0b+j6ZCPvi4rIUKjJGc1JHOVmHjGeYDUiBSjaZePvqPQSJUujHUwBEydAE5OxKdO4fnodRtiKjA6y/KGKsj77GyZrcx55wkGAwxB3PdoQvPRy4GVZbb6Pb8KczTOvXi8DTAU8d8MDsxHvzm+KXMuPM5RMhrz0efVA/J6GJgX9gAG4+RrnchHD/D4OPFaJ/LRAzxGhl69DQCPgMHz0QDA9MHRAEB0EBoAiA5CAwDRQWgAIDoIDQBEpxehSeTtGGv+PQAYlj6ExpDzQc7YcHLsK6GcDNpmgEnTg9CYKhkgNABwxE9ogisZPCqhYbkmQAPNQhNUyUBkkDEhJwmXgynSMutssZ+vtlnx111WHa0Y/GVGYXl3Uw49a1ossbBbD+J0arPHJQKABqFpU8kgnzndgZIYWMnsmy3289V+vtpmYvfVfn4uq8ZG04jsKiQt1vlOas/GEDBu1eYKUmoB2HEITctKBlk+cwzaWgkUKaueVGvlWNJASspZUwfLWXymTmom8/ZtliFJKIAFi9C0r2QgsA1aW/WlxTKva8rVxvahsu+V3kivGE09G3GrNutQXwHAgFloOlQyELgHrSUaEi40InGnp9DUYzEhQuOO4FRQXwHAQOPUKbSSgSDAHRyJ6WhqNXM7ORozTJ0ALLQOBtsqGQjc8Q7LI+RgobHESgxCI7bUnyKFxGiaHnsTDAaw0/LxtqOSQbGB7iBK9Ora+p/8haZWA7c6TlPB3PI5t/bEqk2b7ZcIACravbDXUMlAoMZEbO+kSAPeS2hkVJfRUCNBexFGra/Qus3l1eCFPQAHrZYgDFTJwByRAYDkaSE0g63VRmgARsqY8tEgNAAjBaEBgOiMSWgAYKQgNAAQHYQGAKKD0ABAdBAaAIgOQgMA0UFoACA6CA0ARAehAYDo/B+9deYHCMCXHAAAAABJRU5ErkJggg==" alt="" />

然后在调用这个子组件的时候加入内容

Vue 爬坑之路(五)—— 组件进阶

添加的内容就会分发到对应的 <slot> 中

<slot> 中还可以作为一个作用域,在子组件中定义变量,然后在父组件中自定义渲染的方式

<img src="data:image/png;base64,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" alt="" />

Vue 爬坑之路(五)—— 组件进阶

这个示例中,首先在子组件中添加 <slot>,并在子组件中定义了数组变量 navs

然后在父组件中以作用域 <template> 添加内容,其中 scope 是固有属性,它的值对应一个临时变量 props

而 props 将接收从父组件传递给子组件的参数 navs

Vue 爬坑之路(五)—— 组件进阶

三、动态组件

Vue 还可以将多个子组件,都挂载在同一个位置,通过变量来切换组件,实现 tab 菜单这样的效果

Vue 爬坑之路(五)—— 组件进阶

这样的功能可以通过路由 vue-router 实现,但路由更适合较大的组件,而且 url 会有相应的改变

Vue 自身保留的 <component> 元素,可以将组件动态绑定到 is 特性上,从而很方便的实现动态组件切换

Vue 爬坑之路(五)—— 组件进阶

上例中,当 tabView 的值改变,<component> 就会渲染对应的组件,和路由的效果十分类似,但是地址栏并没有发生改变

但这样一来,每次切换组件都会重新渲染,无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中,避免重新渲染

Vue 爬坑之路(五)—— 组件进阶

Vue 爬坑之路(五)—— 组件进阶

四、递归组件

当组件拥有 name 属性的时候,就可以在它的模板内递归的调用自己,这在开发树形组件的时候十分有效

Vue 爬坑之路(五)—— 组件进阶

上面是一个子组件,定义了 name 为 simple03,然后在模板中调用自身,结合 v-for 实现递归

为了防止出现死循环,在调用自身的时候,加入了 v-if 作为判定条件

父组件中调用的时候,需要通过 props 传入一个 tree:

Vue 爬坑之路(五)—— 组件进阶

Vue 爬坑之路(五)—— 组件进阶

最终渲染结果:

Vue 爬坑之路(五)—— 组件进阶

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,121
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,593
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,438
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,209
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,845
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,930