render函数的的数据对象里面的值怎么使用

来源:2-6 【讨论题】Virtual DOM

我要学习去了

2021-08-25

想请问一下render函数里面的数据对象里面的值要怎么使用啊,就说props和attrs,我发现我想在数据对象里面定义一些props,然后想在子集虚拟节点使用它,我发现是不行的,但是如果把props定义在外面,就可以生效,那如果这样子的话数据对象里面的props有什么用呢?

下面例子我想使用数据对象里面定义的arr2,发现根本使用不了,但是定义在外面的props里面的arr就能使用并遍历出来

<script>
import Test from "./Test";
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
    },
    arr: {
      type: Array,
      default() {
        return ["2222", "43333", "65675", "545636"];
      },
    },
  },
  render(h) {
    console.log(this)
    return h(
      "div",
      {
        class: ["demo", { foo: true }],
        props: {
          arr2: {
            type: Array,
            default() {
              return ["2222", "43333", "65675", "545636"];
            },
          },
        },
        domProps: {
          str: 'baz'
        },
      },
      [
        h(Test),
        this.msg,
        h("div", {}, [
          h(
            "em",
            {},
            this.arr.map((item) => {
              return h("div", { class: "item" }, item);
            })
          ),
        ]),
        // h("div", {}, [
        //   h(
        //       "em",
        //       {},
        //       this.arr2.map((item) => {
        //         return h("div", { class: "item" }, item);
        //       })
        //   ),
        // ]),
      ]
    );
  },
};
</script>

<style scoped>
.item {
  color: red;
}
</style>


写回答

1回答

ustbhuangyi

2021-08-25

你在执行 render 函数的时候,传入的 props 肯定是一个对象值啊,怎么能是 prop 的定义呢?

 props: {
          arr2: {
            type: Array,
            default() {
              return ["2222", "43333", "65675", "545636"];
            },
          },
        },


这个是 props 的定义,并非值。

建议把文档这块内容好好读几遍:https://cn.vuejs.org/v2/guide/render-function.html

0
1
我要学习去了
我明白了,昨天研究了一下,发现是自己理解错了,多谢
2021-08-26
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程