Vue自定义组件插入值
2023-09-14 09:00:17 时间
我们自定义组件的时候有时候需要往组件里面插一些内容:
//定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <div> <div>这里是test组件</div> <slot name="content1"></slot> <slot name="content2"></slot> </div> ` }
调用组件的时候
new Vue({ el: '#app', components: { test }, template:` <div> <test> <div slot="content1">这是插值内容1</div> <div slot="content2">这是插值内容2</div> </test> </div> ` })
当然我们也可以不定义slotName全部引入
//定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <div> <div>这里是test组件</div> <slot></slot> </div> ` }
slot没有name属性的时候就会插入那些没有slot属性的插入内容,例如下面的’这是插值内容2‘会被插入到<slot></slot>的位置,但是‘这是插值内容1’就不会被插入了
new Vue({ el: '#app', components: { test }, template:` <div> <test> <div slot="content1">这是插值内容1</div> <div>这是插值内容2</div> </test> </div> ` })
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue之用法
- vue的一些小坑
- vue子组件的自定义事件
- vue项目如何实现返回上一页
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- vue.js3: 从详情页返回列表页,显示跳转前列表而不是第一页(vue@3.2.26)
- Vue 组件懒加载,图片懒加载
- vue 3.0 suspense组件
- vue - 自定义组件使用v-model属性的具体说明,重点说明参数的定义
- vue - vant组件库 - card组件 修改 thumb属性的图片 参数后不及时刷新解决
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
- 解决springboot+vue+mybatis中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息
- Vue、Vuejs从入门到精通 | vue-router详解
- 224:vue+openlayers 绘制一个多边形,避免线段交叉,drawend有交叉提示并重绘
- 044:vue+openlayers利用canvas clip 实现上卷帘功能(代码示例)
- 一文教会你如何运行vue项目
- Vue 插槽 slot的简单实用
- vue项目中使用CDN引入
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)
- Vue学习笔记——Vue UI组件库