如何轻松上手Vue中的插槽功能
最编程
2024-08-01 15:39:23
...
一、插槽的基本使用
二、具名插槽的使用
三、编译作用域的例子
四、作用域插槽
一、插槽的基本使用
1.插槽的基本使用<slot></slot>
2.插槽的默认值<slot>button</slot>
3.如有多个值,同时放入到组件进行替换时,一起作为替换元素
<div id="app"> <h1>我是父组件</h1> <cpn><button>按钮</button></cpn> <cpn><span>span标签</span></cpn> <cpn><input type="text"></cpn> <cpn> <i>我这有这么多</i> <span>wo</span> <button>666</button> </cpn> <cpn></cpn> </div> <template id="templ"> <div> <h2>我是组件</h2> <p>我是组件啊啊啊啊啊</p> <slot><button>我是默认值</button></slot><!--插槽的默认值--> </div> </template> <script src="/js/vue.js"></script> <script> const vm = new Vue({ el:'#app', data:{}, components:{ cpn:{ template:"#templ" } } }); </script>
二、具名插槽的使用
<!--导航栏效果 分为左中右--> <div id="app"> <!-- 替换中间的 --> <cpn><input type="text" placeholder="搜索" slot="center"></cpn> <!-- 替换左边的 --> <cpn><button slot="left">返回</button></cpn> <!-- 替换右边的 --> <cpn><button slot="right">前进</button></cpn slot="right"> </div> <template id="templ"> <div> <slot name = "left"><span>左边</span></slot> <slot name = "center"><span>中间</span></slot> <slot name="right"><span>我是默认值</span></slot><!--插槽的默认值--> </div> </template>
上面的方法是旧的,已弃用。
三、编译作用域的例子
<div id="app"> <cpn v-show="isShow"></cpn> </div> <template id="templ"> <div> <h2>我是子组件</h2> <p>我是组件啊啊啊啊啊</p> <button v-show="isShow">我用的是组件里的data</button> </div> </template> <!-- 不关心你用的是哪个组件,看你是在哪个模板 --> <script src="/js/vue.js"></script> <script> const vm = new Vue({ el:'#app', data:{ isShow:true//模板里是按照这个来的。 }, components:{ cpn:{ template:"#templ", data(){ return{ isShow:false//子组件中是使用这个值 } } } } });
四、作用域插槽
<div id="app"> <cpn></cpn> <!-- 父组件在展示时希望中间以其他形式分割 --> <!-- 目的:获取子组件中的lang vue2.5.x以下要用<template></template>模板--> <cpn> <template slot-scope="slot"> <span v-for="items in slot.data">{{items}}-</span> </template> </cpn> <cpn> <template slot-scope="slot"> <span>{{slot.data.join(' * ')}}</span> </template> </cpn> </div> <template id="templ"> <div> <slot :data="lang"> <ul> <li v-for="items in lang">{{items}}</li> </ul> </slot> </div> </template> <!-- 父组件替换插槽的标签,内容由子组件来提供 --> <script src="/js/vue.js"></script> <script> const vm = new Vue({ el:'#app', data:{ }, components:{ cpn:{ template:"#templ", data(){ return{ lang:['JavaScript','C++','Python','Java','Go'] } }, created(){ // this.lang.join(' - '); } } } }); </script>
上面的方法是旧的,已弃用。
上一篇: 讨论实现热插拔AOP的方法论
推荐阅读
-
如何轻松上手Vue中的插槽功能
-
在Vue开发中,如何轻松配置VS Code的TS Lint以避免ESLint和Prettier间的冲突,并实现一键代码格式化?
-
如何在Redisson中实现轻松的获取与释放锁功能
-
如何在Vue中,轻松实现跨层次引用组件的Ref教程
-
如何在Vue3中轻松实现特性开关(Feature Flags)的步骤1247
-
在MySQL 5.7.x中,如何轻松实现像SQL窗口函数那样的功能,比如分组后获取每组内的前N个数据?
-
如何轻松在ABAP中实现Form的递归功能
-
轻松上手:表格提交功能中的文件上传
-
在Vue 3中,如何轻松地优化form组件的使用方法?
-
Vue 3 中的设置功能是如何工作的?