• render函数使用


    <script>
    export default {
      data () {
        return {
          item: ['张三','李四','小明']
        }
      },
      // 在组件中使用,去除组件中的template标签  (组件中的template标签中的内容编译时最终都会编译成render函数)
      // createElement参数配置请看vue官网 https://cn.vuejs.org/v2/guide/render-function.html
      /* 
        createElement();
        第一个参数(必要参数):主要用于提供dom的html内容,类型可以是字符串、对象或函数
        第二个参数(类型是对象,可选):用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类
        第三个参数(类型是数组,数组元素类型是vnode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有vnode必须是唯一的
      */
    
      render: function (h) {
        console.log(h);
        // return createElement(
        //   "div",
        //   {},
        //   this.item.map(name => {
        //     return createElement('span', {
        //       class: 'box',
        //       on: {
        //         click: this.handlerClick
        //       }
        //     }, name);
        //   })
        // );
    
    
        // jsx写法
        return (
          <div class={'box'} onclick={this.handlerClick}>
            { this.item.map(name => { return <span>{ name }</span> }) }
          </div>
        )
      },
      methods: {
        handlerClick() {
          console.log('click');
        }
      }
    };
    </script>
    <style scoped>
      .box {
        color: red;
        font-size: 50px;
        display: block;
      }
    </style>

    页面显示

    createElement传入一个组件
    <script>
    import msg from "./components/msg.vue";
    export default {
      render: function (h) {
        console.log(h);
        // createElement第一个参数也可以传入一个组件
        // return h(msg, {
        //   props: {
        //     msg1: 'css',
        //     msg2: 'html',
        //     msg3: 'javascript',
        //   },
        // });
    
    
        // jsx写法
        return (
          <msg msg1={'css'} msg2={'html'} msg3={'javascript'} />
        )
      },
    };
    </script>
    <template>
      <ul>
        <li>{{ msg1 }}</li>
        <li>{{ msg2 }}</li>
        <li>{{ msg3 }}</li>
      </ul>
    </template>
    <script>
    export default {
      props: {
        msg1: String,
        msg2: String,
        msg3: String,
      }
    }
    </script>
    <style scoped>
      li {
        font-size: 50px;
        color: red;
      }
    </style>

    页面显示

    render函数使用场景

    <template>
      <div>
        <level :level="1">hello world1</level>
        <level :level="2">hello world2</level>
        <level :level="3">hello world3</level>
        <level :level="4">hello world4</level>
        <level :level="5">hello world5</level>
        <level :level="6">hello world6</level>
      </div>
    </template>
    <script>
    import Level from './components/level.vue'
    export default {
      components: {
        Level
      }
    };
    </script>
    <style scoped>
    
    </style>
    <script>
    export default {
      props: {
        level: Number
      },
      render: function (h) {
        console.log(h);
        console.log(this.$slots);
        // return createElement(`h${this.level}`, this.$slots.default, );
    
        // jsx写法
        const tag = `h${this.level}`;
        return (
          <tag>
            { this.$slots.default }
          </tag>
        )
      }
    }
    </script>

    页面显示

     
  • 相关阅读:
    MySQL 操作命令梳理(1)-- 索引
    Linux下对LVM逻辑卷分区大小调整 [针对xfs和ext4文件系统]
    CentOS6 虚拟机安装后,无Iptables配置文件
    Linux系统权限设置
    完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置
    完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
    Android消息推送怎么实现?
    Android 下拉刷新
    Windows 10 周年更新正式版下载 + win10 快捷键
    markdown编辑器使用建议
  • 原文地址:https://www.cnblogs.com/ltog/p/14331854.html
Copyright © 2020-2023  润新知