Vue.js中的功能组件的理解


本文摘自PHP中文网,作者清浅,侵删。

Vue中的功能组件是一个采用渲染上下文并返回渲染HTML的组件,它没有实例。创建功能组件必须要使用functional: true属性以及渲染功能来创建对象

功能组件可允许以简洁的方式来通过传递上下文创建简单的组件,使它们变得非常简单而大受欢迎,接下来将要在文章中分享的是Vue.js中的功能组件,具有一定的参考价值,希望对大家有所帮助。

【推荐课程:Vue.js教程

什么是功能组件

功能组件可以看作是与组件相关的功能,也就是说它是一个采用渲染上下文并返回渲染HTML的组件。它没有实例,因此也就没有this。

创建功能组件

要创建一个功能组件,必须要使用functional: true属性以及渲染功能来创建对象。在下面的例子中将创建一个FunctionalButton组件的示例:

1

2

3

4

5

export default {

  functional: true,

  render(createElement, context) {

    return createElement('button', 'Click me');

  }};

渲染上下文

context在render函数上看到的参数称为渲染上下文。它是一个包含以下属性的对象:

props:提供props 的对象

children :VNode 子节点的数组

slots:函数返回slot对象

parent:对父组件的引用

listeners:一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。

injections:如果使用了 inject 选项, 则该对象包含了应当被注入的属性。

data: 包含所有先前属性的对象

触发事件

由于功能组件没有实例,事件侦听器来自context.listeners属性上的父级,所以可用以下代码来实现click事件

例:假设有一个App.vue组件,可以在其中导入FunctionalButton.js以在其模板中使用它

1

2

3

4

<template>

  <FunctionalButton>

    Click me

  </FunctionalButton></template>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

export default {

  functional: true,

  render(createElement, { props, listeners, children }) {

    return createElement(

      'button',

      {

        attrs: props,

        on: {

          click: listeners.click

        }

      },

      children

    );

  }};

总结:以上就是本篇文章的全部内容了,希望对大家有所帮助。

以上就是Vue.js中的功能组件的理解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

彻底理解css中视觉格式化模型(附示例)

vue.js中循环引用组件报错怎么办

vue.js怎样刷新组件

vue.js图片怎么插入

vue中值得关注的21个开源项目(推荐)

vue.js如何安装jq

vue.js如何判断输入是否是数字

vue.js怎么获取某个dom元素的值

vue.js如何设置时间格式

如何启动vue.js项目

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...