[JavaScript知识库] Vue 插槽

IT数码购物网址头条软件日历阅读图书馆

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

图片批量下载器
↓批量下载图片,美女图库↓

图片自动播放器
↓图片自动播放器↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue 插槽 -> 正文阅读

[JavaScript知识库]Vue 插槽

在 Vue 中我们使用 <slot> 元素作为承载分发内容的出口作者称其为插槽可以应用在组合组

件的场景中比如准备制作一个待办事项组件（todo ）该组件由待办标题（ todo-title ）和待办内容（ todo-items）组成但这三个组件又是相互独立的该如何操作

第一步 : 定义一个待办事项的组件

<todo></todo>
<script type="text/javascript">
// 定义一个待办事项的组件
Vue.component('todo', {
template: '<div>\
            <div>待办事项</div>\
             <ul>\
               <li>学习Java</li>\
             </ul>\
            </div>'
});
</script>

第二步 : 让待办事项的标题和值实现动态绑定? ? 留出一个插槽

1 、将上面的代码留出一个插槽 , 即 slot

Vue.component('todo', {
template: '<div>\
            <slot name="todo-title"></slot>\
             <ul>\
               <slot name="todo-items"></slot>\
             </ul>\
           </div>'
});

2 、定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件

Vue.component('todo-title', {
         props: ['title'],
         template: '<div>{{title}}</div>'
});

//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
      props: ['item', 'index'],
      template: '<li>{{index + 1}}. {{item}}</li>'
});

3 、实例化 Vue 并初始化数据

new Vue({
       el: '#app',
       data: {
         todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
       }
})

4 、将这些值 , 通过插槽插入

<div id="app">
    <todo>
       <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
       <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    v-bind:item="item" v-bind:index="index"></todo-items>
    </todo>
</div>

说明 : 我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽

中

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

vue项目安装包指令收集

上一篇文章下一篇文章查看所有文章

加:2022-10-31 11:46:33 更:2022-10-31 11:47:15

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/17 15:05:09-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码