Vue.js中的功能组件是什么-创新互联

小编给大家分享一下Vue.js中的功能组件是什么，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

创新互联建站专业为企业提供岳普湖网站建设、岳普湖做网站、岳普湖网站设计、岳普湖网站制作等企业网站建设、网页设计与制作、岳普湖企业网站模板建站服务，十载岳普湖做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

功能组件可允许以简洁的方式来通过传递上下文创建简单的组件，使它们变得非常简单而大受欢迎。

什么是功能组件

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

创建功能组件

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

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以在其模板中使用它

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }};

看完了这篇文章，相信你对Vue.js中的功能组件是什么有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

文章题目：Vue.js中的功能组件是什么-创新互联
文章网址：https://www.cdcxhl.com/article6/dsppig.html

成都网站建设公司_创新互联，为您提供外贸网站建设、搜索引擎优化、云服务器、用户体验、网站制作、微信小程序

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联