vue 组件插槽_vue插槽的使用
2023-06-13 09:14:52 时间
大家好,又见面了,我是你们的朋友全栈君。
插槽应用场景
- 当封装一个组件后, 内部有一些地方待定功能暴露给外界来写。 就好比于el-table中的单个表格内部可能是下拉框,或者是一些文本输入。 需要用template来嵌套使用
子组件
<template>
<div>
<div v-for="item in arrData" :key="item.id">
<slot name="todo" :row="item"></slot>
</div>
</div>
</template>
<script>
export default {
props:{
arrData:{
type : Array
}
}
}
</script>
父组件
<template>
<div>
<Test :arrData="arrData">
<template v-slot:todo="{row}">
<span>{
{
row.className}}</span>
</template>
</Test>
</div>
</template>
<script>
import Test from "./children/test.vue"
export default {
data() {
return {
arrData:[
{
id:1, className:"11111"},
{
id:2, className:"22222"},
{
id:3, className:"33333"},
{
id:4, className:"44444"},
{
id:5, className:"55555"},
{
id:6, className:"66666"},
]
}
},
components: {
Test
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/190199.html原文链接:https://javaforall.cn
相关文章
- Vue父子组件传值的方法[通俗易懂]
- vue中 父组件向子组件传值案例讲解「建议收藏」
- 详解如何在vue项目中使用layui框架及采坑
- vue源码分析-组件
- easycom模式使vue组件无需引入即可使用
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- vue封装组件方法_什么是vue组件
- 如何使用Vue封装组件[通俗易懂]
- vue跨域问题的三种解决方案_前端解决ajax跨域问题的方式
- Vue子组件调用父组件的方法「建议收藏」
- Vue调试工具安装(vue devtools)
- Vue 组件注册:基本使用和组件嵌套
- vue中父组件和子组件交互的方式
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue非父子组件传值之事件总线(eventbus)的使用方式
- Vue组件通信的其他方式
- vue模块化开发
- Vue的beforeRouteEnter如何使用组件实例的方法
- vue.js入门篇之Vue.js 样式绑定
- vue入门篇之Vue.js 组件
- Vue组件通讯详解编程语言
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)