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:

  • 相关阅读:
    CSS
    CSS
    HTML
    HTML
    HTML
    ubuntu server安装的一些坑
    Haproxy 开启日志记录
    nginx反向代理时保持长连接
    最简单的tomcat安装部署
    nginx的安装部署以及使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9362981.html
Copyright © 2011-2022 走看看