Vue范围槽槽-范围实例代码

vue中有三种槽：单槽、命名槽和限定范围槽，可以在官网上看到

(https://cn.vuejs.org/v2/guide/components.html#单槽)

作用域槽只是意味着父组件只关心显示样式，数据由子组件提供。例如，在上面的代码中，el-table-column中的模板是传递给它的内部solt的显示内容，但是scope的值是由el-table-column的内部solt绑定的数据返回的。el-table-column中指定的数据类似于：

slot name=' * * ' : data=' data '/slot export default { data : function(){ return { data :[' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6']}}，作用域是上面的代码

昨天看了vue的官网文档，在槽-范围部分没看懂。今天我做了一个小例子，方便大家理解。

让我们谈谈我们假设的常见应用场景。我们已经开发了待办事项列表的一个组件，许多模块正在使用中。现在要求在不影响被测模块功能和显示的情况下，给已完成的待办事项增加签到效果。

换句话说，待办事项列表组件应该满足以下几点

之前数据格式和引用界面保持不变，对于新功能模块的正常显示有很多解决方案。然而，为了解释组件的作用域槽，我们用槽作用域记下了以前组件的代码。

Todo-list.vue组件

模板ul Li v-for=' todoList ' v-bind : key=' item . id ' slot v-bind : item value=' item ' { item . test } }/slot/Li/ul/Templatescriptexportdefault { name : ' todoList '，props: { todos3360array }，data () {return {todolist3360this。todos } } }/脚本组件代码

模板ul Li v-for=' todoList ' v-bind : key=' item . id ' slot { { item . test } }/slot/Li/ul/Templatescriptexportdefault { name : ' todoList '，props: { todos3360array }，data () {return {todolist3360this。todos } } }/编写父组件代码

template div id=' app ' H2 component call before/H2 todo-listv-bind : todos=' todos before '/todo-list/div/templatescriptimport to polist from '。/components/Todo-list . vue ' export default { name : ' app '，data : function(){ return { todos before :[{ test : ' query time '，id:12312313123}，{ test: ' agent 1 '，id:123123123423}，{test3360 '年底见'，id:1234

步骤

为了增加待办事项的交叉检查效果，我们需要调整data中的数据结构，添加到todosAfter数组，并为每个项目添加isComplete标识。

todos fter :[{test: '查询时间'，iscomplete : true，id :12312313123}，{test: '代理1 '，iscomplete 3360 false，id :123123423423 }，{ test : '年底见'，iscomplete : false，id :12312313123

我很难读懂别人的帖子。我想不出这个槽的范围是什么，它的功能是什么。我用白话反复思考。澄清两个问题

slot solt代码写在哪里？当然，在父组件中，solt是子组件暴露给父组件的接口，需要从父组件传递给子组件。插槽范围，字面上理解为范围插槽，只适用于插槽。

传输步骤是

父组件将数据给子组件，父=子子组件将数据给槽，并将其暴露给槽槽接口和调用子组件的父组件的数据。我们之前给数据添加了isComplete属性，现在需要把子组件项传递给slot，把数据接口itemValue公开给父组件，重点是v-bind:itemValue='item '。

模板ul Li v-for=' todo list中的项目' v-bind:键='项目。id ' slot v-bind : ItemValue=' item ' { item。test}}/slot/Li/ul/template Next是调用子组件的父组件的插槽和项目值数据。

组件在h2调用之前/H2 todo-listv-bind : todos=' todos after '模板槽-作用域='槽道具'！-print item value data-div style=' background : red；边框-bottom:2px纯蓝；'{{slotProps.itemvalue}} /div！-根据判断条件显示检查元素-跨度v-if=' slotprops。项目值。is complete/span！-显示待办事项的名称-{ { slot props . item value . test } }/template/todo-list具有以下效果

附加示例代码：github链接

摘要

其实作用域slot和参数函数很像，组件相当于cb，cb的参数相当于slotProps收到的参数，只是名称和形式变了。

！-function-function foo (str，CB){ var msg=str ' hello '；cb(味精)；}!-call - foo ('Yu Kun '，函数(msg){ alert(msg)})foo ('Yu Kun '，函数(msg) {console。log (msg)})以上就是本文的全部内容。希望对大家的学习有帮助，多多支持我们。