H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vuejs中单页面组件中render函数不运行?

学习研究vuejs的“函数式组件”:
官网链接:函数式组件

在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:

<template functional> </template>

但是我用vuejs脚手架搭建的项目,在单页面组件中,render函数压根不运行:

写的测试代码如下:

<template functional>
    <div>这是template中写的内容</div>
</template>

<script>
    export default {
        name: "custome-test-div",
        render(createElement,context){
            console.log(context);//这里为什么没有运行
            return h('div',"这是render函数中写的内容");
        }
    }
</script>

<style scoped>

</style>

运行结果为:

clipboard.png

我在codesandbox上做了一个在线demo:
https://codesandbox.io/s/yqmm…

回答:

楼主,你好!函数式组件,它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。所以它的引入就是为了方便开发者定义很逻辑清晰的组件。vue 单文件里并没有 render 方法,因此不会执行。
你的例子可以改为这样:
1,传送门
2,传送门

下面摘自官网,可以再详细看下,

注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接受 props,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的属性都会被自动解析为 props。

在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:

<template functional>
</template>
组件需要的一切都是通过上下文传递,包括:

props:提供所有 prop 的对象
children: VNode 子节点的数组
slots: 返回所有插槽的对象的函数
data:传递给组件的数据对象,并将这个组件作为第二个参数传入 createElement
parent:对父组件的引用
listeners: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。
在添加 functional: true 之后,锚点标题组件的 render 函数之间简单更新增加 context 参数,this.$slots.default 更新为 context.children,之后this.level 更新为 context.props.level。


如有帮助,麻烦点击下采纳,谢谢~

回答:

要用render函数,把<template>给去掉

回答:

你这个demo写错了呗: template选项的优先级比render选项的优先级高。这两个选项都是告诉vue如何去渲染页面的,同时只能有一个生效。

去掉demo的template代码,才会运行render函数:


<script>
    export default {
        functional:true,
        name: "custome-test-div",
        render(createElement,context){
            console.log(context);//这里为什么没有运行
            return createElement('div',"这是render函数中写的内容");
        }
    }
</script>

<style scoped>

</style>

回答:

render function肯定是要运行的,你确定在cli是这么写的吗,是什么场景会让你用到它,不好意思我没用过知道不太多,(还有为啥你一提问我就会收到邮件让我回答是咋回事,黑人问号脸.jpg)

回答:

vue中使用template则没有render方法,react框架中一定要,vue中你可以在methods中定义自己的方法,在生命周期中调用或者在template中调用
使用js创建html则需要render方法

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        <a href="#">Hello world!</a>
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component('tb-heading', {
      render: function(createElement) {
        return createElement(
          'h' + this.level,    // tag name 标签名称
          this.$slots.default  // 组件的子元素
        )
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: '#container'
    });
  </script>
</html>

回答:

核心就一句话:.vue 文件(单文件组件)没有这个 render.

render 什么时候用呢?

比 template 更接近编译器

回答:

不知道楼主解决了没有?我看了下,楼主代码写错了吧,rander 函数第一个参数定义的是 createElement,下边用的时候写 h?

另外,最新版的 Vue 在单文件中也是有 rander 函数的,而且可以与 template 共存,但是 rander 函数优先级比 template 低,说白了就是写了 template 会导致 rander 不执行(但绝不是没有这个函数)。

本文地址:H5W3 » vuejs中单页面组件中render函数不运行?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址