zoukankan      html  css  js  c++  java
  • [Vue @Component] Control Template Contents with Vue's Render Function

    Declaring templates and elements inside of templates works great for most scenarios. Sometimes you need a bit more control over what your component will do with the props and children it receives, so Vue provides a render function that allows you complete programmatic control over every argument using JSX.

    We have a parent component which renders:

            <Content slot="content" :limit="4">
                <div><img src="https://robohash.org/mindy?set=set4" alt=""></div>
                <div><img src="https://robohash.org/john?set=set4" alt=""></div>
                <div><img src="https://robohash.org/kim?set=set4" alt=""></div>
                <div><img src="https://robohash.org/joel?set=set4" alt=""></div>
                <div><img src="https://robohash.org/maggie?set=set4" alt=""></div>
            </Content>

    Content.vue:

    <script>
    import { shuffle } from "lodash"
    export default {
      functional: true,
      render: (createElement, { children, props, data }) => {
        if(props.limit) {
            return createElement('div', data, shuffle(children.slice(0, props.limit)));
        } else {
            return createElement('div', data, shuffle(children));
        }
      }
    }
    </script>

    You can also using JSX:

  • 相关阅读:
    (一)基础配置
    (一)Zookeeper全分布式搭建
    Go性能测试
    Go单元测试
    Go C连接(keep-alive/websocket) D连接 C轮询 D轮询
    Go UDP
    Go TCP 粘包
    Go Once用法 goroutine协程 chanel通道
    Go strconv包
    Go 反射reflect包
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9362981.html
Copyright © 2011-2022 走看看