beka
5/9/2019 - 6:30 AM

render函数实例、例子

<script>
/**
 * 做一个url包含2个li, ul 和 li 都包含点击事件, 并阻止li冒泡
 */
export default {
  name: "renderDemo",
  // 这里用箭头函数,this将绑定错误
  render: function(h) {
    return h(
      "ul",
      {
        on: {
          click() {
            console.log("ul");
          }
        },
        nativeOn: {},
        attrs: { id: "ul" },
        class: ["ul"],
        props: {},
        directives: [],
        slot: "", //作为slot使用时,填写slot的name
        scopedSlots: {},
        key: "",
        ref: ""
      },
      this.getList(h)
    );
  },
  data() {
    return {
      datas: [{ name: "张三" }, { name: "李四" }]
    };
  },
  methods: {
    getList: function(h) {
      return this.datas.map((item, index) => {
        return h(
          "li",
          {
            on: {
              click(e) {
                console.log(e.srcElement.innerText);
                e.stopPropagation();
              }
            },
            key: "item_" + index
          },
          item.name
        );
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>