插槽

slot又名插槽，vue内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口
插槽slot是子组件的一个模板标签元素，而这一个元素是否显示，以及怎么显示是由父组件决定的
slot分为三类：默认插槽、具名插槽、作用域插槽

默认插槽

父组件代码详情

子组件代码详情

运行结果：

又叫匿名插槽，当插槽slot没有指定name属性值的时候一个默认显示一个插槽，一个组件内只有一个匿名插槽

具名插槽

带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽
父组件代码详情

子组件代码详情

运行结果：
具名插槽

作用域插槽

在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据如何渲染该插槽
父组件代码详情

子组件代码详情

ID	名字	价格
{{ f.id }}	{{ f.name }}	{{ f.price }}

**原理：**当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.slot中，默认插槽为vm.slot中，默认插槽为vm.slot中，默认插槽为vm.slot.default,具名插槽为vm.slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot.xxx,xxx是插槽的名字，当组件执行渲染函数时候，遇到slot标签，使用slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则就是作用域插槽

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：使用asan检测内存泄漏、堆栈溢出等问题

下一篇：还在用传统工具进行做计划?试试这五款优秀计划管理工具！

Vue插槽理解

Vue插槽理解

插槽

这里是parent组件

这是parent组件传递给child组件的值

这里是child组件

这是child组件

这里是parent组件

这里是parent组件

相关内容

热门资讯