Vue2与Vue3中通过函数方式调用全局组件，让你快速上手

2024-01-30 22:55:29

在 Vue2 和 Vue3 中，全局组件是一种可以被任何组件引用的组件。全局组件可以帮助我们减少代码的重复和提高代码的可维护性。我们可以通过两种方式来使用全局组件：

在模板中直接使用
通过函数方式调用

在本文中，我们将重点介绍如何通过函数方式调用全局组件。

函数调用全局组件

在 Vue2 中，可以通过 Vue.component() 方法来注册全局组件。在 Vue3 中，可以使用 app.component() 方法来注册全局组件。

以下是一个在 Vue2 中使用函数方式调用全局组件的示例：

Vue.component('my-component', {
  template: '<div>Hello World!</div>'
});

export default {
  data() {
    return {
      showComponent: false
    }
  },
  methods: {
    showMyComponent() {
      this.showComponent = true
    }
  },
  render() {
    return (
      <div>
        <button @click="showMyComponent">Show Component</button>
        <my-component v-if="showComponent"></my-component>
      </div>
    )
  }
}

在这个示例中，我们首先通过 Vue.component() 方法注册了一个名为 my-component 的全局组件。然后，我们在组件的模板中使用了一个按钮，当按钮被点击时，它会调用 showMyComponent() 方法。该方法会将 showComponent 数据属性设置为 true。当 showComponent 为 true 时，组件 my-component 将会被渲染。

在 Vue3 中函数调用全局组件

在 Vue3 中，函数调用全局组件与 Vue2 类似，可以使用 app.component() 方法来注册全局组件。

以下是一个在 Vue3 中使用函数方式调用全局组件的示例：

app.component('my-component', {
  template: '<div>Hello World!</div>'
});

export default {
  data() {
    return {
      showComponent: false
    }
  },
  methods: {
    showMyComponent() {
      this.showComponent = true
    }
  },
  render() {
    return (
      <div>
        <button @click="showMyComponent">Show Component</button>
        <my-component v-if="showComponent"></my-component>
      </div>
    )
  }
}