zoukankan      html  css  js  c++  java
  • vue slot 复用

    有3步

    • 第一步:创建渲染slot的组件 重要
    • 第二步:为slot添加父组件数据(props) 重要
    • 第三步:使用

    第一步:创建渲染slot的组件

    首选创建一个单文件组价,由于我们是使用的slot(父组件传进来的),所以,我们只需要创建js文件即可,而不用创建.vue文件

    // slot.js
    export default {
        name: 'Slot', // slot的名字,调试使用
        functional: true, // 使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。
        inject: ['Root'], // 父组件的映射 
        props: { // 此组件接受的props
            data: Object,
            options: Object
        },
        render: (h, ctx) => { // dom渲染函数
            return h('div', ctx.injections.Root.$scopedSlots['icon']({ // 得到名为icon的作用域插槽
                data: ctx.props.data, // 给slot的组件传递props
                options: ctx.props.options
            }));
        }
    };
    

    第二步:为slot添加父组件数据(props)

    // 导入子组件
    import IconSlot from 'slot.js';
    
    // 切换到父组件
    export default {
        name: 'IconTable',
        components: {IconSlot},
         provide () { // 该对象包含可注入其子孙的属性 在这里把父组件自身传递给子组件
            return {
                Root: this
            };
        },
        data() {
            return {
                list: [],
                options: {}
            };
        }
    }
    
    

    在模板中使用

    <template>
        <div v-for="(item, index) in list" :key="index">
            <icon-slot :data="item" :options="options"></icon-slot>
        </div>
    </template>
    

    第三步:使用

    <icon-table>
        <template slot="icon" slot-scope="{ list, options }">
            <div v-if="list.length > 1"><Icon type="add"></Icon></div>
            <div v-else><Icon type="del"></Icon></div>
        </template>
    </icon-table>
    
    

    大功告成 总结

    如果在父组件直接取this.$slotthis.$scopedSlots的话,
    其实只能用一次
    如果在模板中使用 slot 标签来接收的话,其实也只能只用一次

    所以核心思路是;每次使用都必须重新创建VNode节点,那只能每次都使用createElement生成node,
    那只有一个办法使用render渲染了,然后第一个参数创建dom后,dom附带的数据,都可以是一个对象,只要保证节点是唯一的即可,数据其实无所谓,怎么传都可以

  • 相关阅读:
    剑指offer-删除链表中重复的节点
    剑指offer——二叉树中和为某一值的路径
    动态规划之140 Word Break2
    动态规划之139 Word Break
    动态规划之132 Palindrome Partitioning II
    动态规划之115 Distinct Subsequences
    动态规划之97 Interleaving String
    动态规划之91 decode ways
    vector
    第一篇
  • 原文地址:https://www.cnblogs.com/daowangzhizhu-pt/p/10474014.html
Copyright © 2011-2022 走看看