22渲染函数

# 渲染函数

<script>
export default {
  render(h) {
    let self = this
    return h("div", {
      class: {
        abc: true,
      },
      domProps: {
        innerHTML: "这是渲染函数创建的标签",
      },
      on:{
        click:function(){
          self.fn(1)
        }
      }
    });
  },
  methods:{
    fn(num){
      console.log(num)
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

练习

# 首先安装js

网站：https://github.com/vuejs/js-vue2

npm install @vue/babel-preset-js @vue/babel-helper-vue-js-merge-props

//根目录 babel.config.js
module.exports = {
  presets: ['@vue/babel-preset-js'],
}

1
2
3
4

export default {
data() {
    return {
        list:[1,2,3,4,5]
    }
},
methods: {
    fn(item){
        console.log(item)
    }
},
  render() {
    // return h("div", "这是渲染函数");

    // return h(
    //     "div",
    //     {
    //         class:{ //给div创建class
    //             abc:true,
    //         },
    //         // domProps:{
    //         // innerHTML:"123"
    //         // },
                
    //     },
    //     [
    //         h("p"),
    //         h("a")
    //     ]
    // );

    
    // 简单js写法
    // return <div>这是js</div>

    return (
        <div>
            {
                this.list.map((item,idx)=>{
                    return <div key={idx} onClick={()=>{
                        this.fn(item)
                    }}>{item}</div>
                })
            }
        </div>
    );
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

编辑

上次更新: 2023/08/06, 00:38:41

← 21自定义指令 23插件→