如何在 vue 2 中实例化功能组件？答案

【问题标题】：how to instantiate a functional component in vue 2?如何在 vue 2 中实例化功能组件？
【发布时间】：2022-12-01 16:36:23
【问题描述】：

我的项目中有一个功能组件，现在我需要实例化它以在 JS 中处理它。

我应该怎么办？

我试过Vue.extend()，没用。

我发现某人的代码是这样的：


function createInstance(FunctionalComponent, vnodeData) {
  const instance = new Vue({
    el: document.createElement('div'),
    props: FunctionalComponent.props,
    render(h) {
      return h(
        FunctionalComponent,
        {
          props: this.$props, // why use `this.$props` here?
          ...vnodeData,
        }
      )
    }
  })

  return instance
}

这对我有用，但我想知道他为什么在 h 函数的参数中使用 this.$props？

如果改用FunctionalComponent.props好像不行，为什么？

【问题讨论】：

标签： javascript vue.js vuejs2 frontend vue-component

【解决方案1】：

在 Vue 2 中，功能组件没有实例，所以你不能直接实例化它们。相反，您可以使用 Vue.extend 方法创建一个扩展功能组件的新组件，然后实例化这个新组件。

下面是一个示例，说明如何使用 Vue.extend 方法创建一个扩展功能组件并实例化它的新组件：

// Define the functional component
const MyFunctionalComponent = (props) => {
  // The functional component code goes here...
};

// Use the Vue.extend method to create a new component that extends the functional component
const MyExtendedComponent = Vue.extend(MyFunctionalComponent);

// Instantiate the new component
const instance = new MyExtendedComponent();

在此示例中，Vue.extend 方法用于创建一个扩展MyFunctionalComponent 功能组件的新组件。然后使用new 关键字实例化这个新组件，并将生成的实例存储在instance 变量中。

关于您发布的代码， this.$props 属性用于 h 函数的参数，因为它包含传递给功能组件的道具。功能组件的 props 属性仅包含 prop 定义，而不包含实际的 prop 值。通过使用 this.$props，实际的 prop 值在渲染时传递给功能组件。

【讨论】：