Vue - 渲染函数render

不吃糖葫芦3

已于 2022-08-16 17:25:34 修改

阅读量475

点赞数

分类专栏： # vue 文章标签： vue.js

于 2022-08-16 09:41:05 首次发布

原文链接：https://www.jianshu.com/p/fd62147ab67c

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue的渲染函数render的使用，通过一个具体的代码示例展示了如何在Vue组件中注册并使用render函数，包括创建DOM元素、添加属性、事件监听以及插槽的使用。同时，代码中包含了点击事件的处理方法，实现了动态渲染内容并与父组件交互的功能。

摘要由CSDN通过智能技术生成

参考：Vue - 渲染函数renderhttps://www.jianshu.com/p/fd62147ab67c
具体知识介绍在上面的链接中解释的很详细了，我在vue中试着去实现了一下，代码如下：

<template>
  <div class="hello">
    <renderComponent></renderComponent>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: { //注册了自己渲染的内容
    renderComponent: {
        render: function(createElement) {
          let _this = this['$options'].parent  //指向父级hello （之前写成）
          console.log(_this);
      return createElement (
        // 第一个参数 创建的标签名
        "div",
        //第二个参数 给创建的标签加属性
        {
          //加个类名
          'class': "new-div",
          // 加个插槽
          scopedSlots: {
            haha: props => createElement ('p',props.text)
          },
          on: {
            click:  _this.clickHandler
          }
        },
        // 第三个参数，给上面添加的div内再加点子元素（也是和上面一样，有三个参数，无值时可以使用null）
        [
          createElement (
            'h1',
            null,
            "这是渲染出来的h1标签"
          ),
          createElement(
                  'a', 
                  {
                      attrs: {
                          href: 'https://www.baidu.com'
                      }
                  }, 
                  '百度'
          ),
          createElement(
            'button',
            {
              on: {
                click:  _this.clickHandler
              }
            },
            '这是个按钮'
          )
        ]
      )
    }
    }
  },
  methods: {
    clickHandler(){
      // alert("你点击了渲染出来的div")
      console.log("n你点击了渲染出来的divi");
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.new-div{
  width: 200px;
  height: 300px;
  background-color:burlywood;
}
</style>