Vue2的render函数使用

最新推荐文章于 2025-06-19 10:07:10 发布

Supernova_gu

最新推荐文章于 2025-06-19 10:07:10 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/JankoY/article/details/124064194

本文详细探讨了Vue2的render函数，从基础概念到实际应用，涵盖官网教程的重点内容，帮助读者掌握如何利用render函数进行高效组件渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

render函数官网教程

<script>

export default {
  name: 'appTable',
  // 接收的prop数据
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: {},
    operations: {},
    isOperations: {},
    tableAttrs: {},
  },
  data() {
    return {
      loadingMap: {},
    };
  },
   //reder(h){
   //第一个参数接收{String | Object | Function}，用作元素名字
   //第二个参数接收'Object'，用作渲染元素属性
   //第三个参数接收{String | Array}，用作子节点渲染
   }

  // 在render里每个h()会产生一个vnode节点
  render(h) {
    const columns = [];
    columns.push(h(
      'el-table-column',
      {
        attrs: {
          label: '操作',
          'min-width': '100px',
          align: 'center',
        },
        // scopedSlots显示props数据，通过default函数获取父节点的data数据
        scopedSlots: {
          default: props => h('div', props.row.id,console.log(props))
        },
      }),
      h(
      'el-table-column',
      {
        attrs: {
          label: '操作',
          'min-width': '100px',
          align: 'center',
        },
      },
      ),
    );
    return h(
      'el-table',
      {
      // 节点属性
        attrs: {
          stripe: true,
          'highlight-current-row': true,
        },
        //该h()节点里接收的数据 
        props: {
          data: this.data,
        },
      },
      // 子节点
      columns,
    );
  },
};

</script>