vue2知识点：组件插槽分发 |
您所在的位置：网站首页 › todo安装 › vue2知识点：组件插槽分发 |
vue2知识点：组件插槽分发
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路。
父子组件使用时,有时需要将父元素的模板跟子元素模板进行混合,这时就要用到slot插槽进行内容分发, 简单理解就是在子模板定义中先占个位置等待父组件调用时进行模板插入。 3.14.1slot插槽注意：在子组件模板定义中使用标签定义插槽位置，标签中可以填写内容，当父组件调用子组件且不传入内容时显示此标签体中内容，当父组件在引用子组件时，标签中的内容会放在子组件的插槽中。 举例完整代码： 父组件模板 模板混入.... 我是子组件 {{msg}} 我是默认内容,父组件不传入时我显示 Vue.component('child', { template:'#child-template', props:['msg'] }); var app = new Vue({ el:'#app', data:{ msgText:'父组件数据' } }); 复制代码结果展示 具名插槽slot, 就是给插槽起个名字。在子组件定义时可以定义多个插槽,同时通过name属性指定一个名字就可实现匹配,如:，父组件引用时使用< slot='header'>进行匹配插槽插入元素。 注意点1：子组件模板定义了两个插槽header和footer，分别使用name属性进行名称的指定，父组件引用子组件的标签中通过slot属性，来确定内容需要分发到哪个插槽里面。 大白话讲：slot标签通过配置name="header"名字，而父组件引用子组件的待传入标签通过配置slot="header"进行匹配插槽位置。 举例完整代码： 头部 底部 我是子组件 {{msg}} Vue.component('child', { template:'#child-template', props:['msg'] }); var app = new Vue({ el:'#app', data:{ msgText:'父组件数据' } }); 复制代码结果展示 作用域插槽slot-scope，父组件通过插槽混入子组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据，使用方式:，父组件通过进行引用。 大白话讲就是：子组件插槽slot定义属性，让父组件待插入的标签内容可以直接使用slot定义的属性内容。 说明点1：在slot标签中指定属性值，类似于props属性的使用，只不过是反过来的。即：组件标签中props属性用于父传子，而slot标签中指定属性值，是子传父。 说明点2：引用时用template标签指定，slot-scope属性指定接收数据的变量名，就可以使用花括号形式取值了。 完整代码： {{msgText}} {{props.text}} Vue.component('child', { template:'#child-template' }); var app = new Vue({ el:'#app', data:{ msgText:'父组件数据' } }); 复制代码 3.14.4slot-scope版本更新在2.5+之后,可以不局限于, 任何元素都可以，同时可以使用解构赋值的方式进行数据解析。 子组件： 复制代码父组件使用： 子组件数据: {{props.text}} {{fa}} {{props.text}} == {{props.value}} {{text}} == {{title}} 复制代码js部分： Vue.component('child', { template:'#child-template' }); var app = new Vue({ el:'#app', data:{ fa:'father 数据' } }); 复制代码结果展示 1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结 2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结 3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点 4.《基础篇第4章》：使用vue脚手架创建项目 5.vue2知识点：数据代理 6.vue2知识点：事件处理 7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测） 8.vue2知识点：计算属性与监听属性 9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解） 10.vue2知识点：非单文件组件和单文件组件 11.vue2知识点：组件is属性 12.vue2知识点：组件模板定义 13.vue2知识点：组件的props属性、非props属性、props属性校验 14.vue2知识点：组件自定义事件 15.vue2知识点：组件插槽分发 16.vue2知识点：动态组件 17.vue2知识点：混入 18.vue2知识点：浏览器本地缓存 19.vue2知识点：全局事件总线（GlobalEventBus） 20.vue2知识点：消息订阅与发布 21.vue2知识点：nextTick语法 22.vue2知识点：Vue封装的过度与动画 23.vue2知识点：路由 24.vue2知识点：vm调用待$命令介绍 25.vue组件通信案例练习（包含：父子组件通信及平行组件通信） 26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解 27.vue2基础组件通信案例练习：待办事项Todo-list案例练习 28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存 29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件 30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线 31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布 32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮 33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度 34.学习vue2遇到过的问题及个人总结 |
【本文地址】