1. 首页首页
  2. 科技前沿科技前沿

vue2插槽（vue2插槽名称怎么动态添加）

科技前沿 • • 阅读 30

vue2插槽（vue2插槽名称怎么动态添加）功能 用于从父组件中 通过子组件写成双标签 向子组件中放入自定的内容 parent vue 1 首先把 child 写成双标签样式 把要插入的内容放双标签中间 注 如果要控制样式在父组件中 在子组件中写样式都可以 child vue 2 在子组件放个 slot 双标签接收父组件在双标签中插入的内容 App vue 不重要 效果 如下图 原写在父组件的内容 已经插入到子组件中了 parent

大家好，我是讯享网，很高兴认识大家。



【功能】用于从父组件中，通过子组件写成双标签，向子组件中放入自定的内容

parent.vue

child.vue

【2】在子组件放个slot双标签接收父组件在双标签中插入的内容

App.vue

不重要

vue antd动态定义rulesInfo_函数实现
讯享网

parent.vue

【1】在child双标签下写入对应的内容，在标签上加个属性（>)（xxx为子组件中的 name值）在标签中加上想插入的内容

child.vue

【1】对slot加个属性name=xxx，

vue antd动态定义rulesInfo_函数实现_02

1.2.2插入一堆东西到子组件的插槽写法

只要把所子标签外面包一个父标签，把slot=‘name-value’放在父标签上即可

parent.vue

vue antd动态定义rulesInfo_数据_03

parent.vue

child.vue

【1】通过在插槽里放一个自定义属性text=‘待传递的数据’向父组件传数据

vue antd动态定义rulesInfo_函数实现_04

【0】写1个数据用来指向随便一个子组件名
【1】动态组件写法，在内部加上属性用来绑定数据部分
【2】切换子组件，利用在methods里的changeView函数实现
【3】改变数据里的指向为另一个子组件2，即可在component里实现组件视图的切换

vue antd动态定义rulesInfo_数据_05

keep-alive标签把要来回切换的组件放到缓存中提高性能，同时保持状态；

vue antd动态定义rulesInfo_数据_06

其它代码同上例，只有child.vue改变

vue antd动态定义rulesInfo_数据_07

小讯
上一篇 2025-04-27 15:47
下一篇 2025-05-01 20:48

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/163658.html