前端必知必会-Vue本地组件

Vue本地组件

到目前为止，我们包含组件的方式使得它们可以从项目中的所有 *.vue 文件访问。

组件可以设置为本地组件，这意味着它们只能在特定的 *.vue 文件内访问。

全局组件

到目前为止，我们包含 main.js 中的组件的方式使得这些组件可以在该项目中所有其他 *.vue 文件的 <template> 内访问。

示例
我们在 ***pTwo.vue 和 App.vue 中使用 ***pOne.vue 组件来显示组件在我们当前的 main.js 设置下可以相互访问。

main.js:

import { createApp } from 'vue'
 
import App from './App.vue'
import ***pOne from './***ponents/***pOne.vue'
import ***pTwo from './***ponents/***pTwo.vue'

const app = createApp(App)
app.***ponent('***p-one', ***pOne)
app.***ponent('***p-two', ***pTwo)
app.mount('#app')

本地组件

我们可以在 *.vue 文件的 <script> 标签中直接包含组件，而不是将其包含在 main.js 中。

如果我们在 *.vue 文件中直接包含组件，则该组件只能在该文件中本地访问。

示例
要使 ***pOne.vue 成为 App.vue 的本地组件，并且只能在那里访问，我们需要将其从 main.js 中删除。

main.js:

import { createApp } from 'vue'
 
import App from './App.vue'
//import ***pOne from './***ponents/***pOne.vue' 
import ***pTwo from './***ponents/***pTwo.vue'
 
const app = createApp(App)
app.***ponent('***p-one', ***pOne) 
app.***ponent('***p-two', ***pTwo)
app.mount('#app')

并直接在 App.vue 的 <script> 标签中包含 ***pOne.vue。

App.vue:

<template>
  <h3>Local ***ponent</h3>
  <p>The ***pOne.vue ***ponent is a local ***ponent and can only be used inside App.vue.</p>
  <***p-one />
  <***p-two />
</template>

<script> 
  import ***pOne from './***ponents/***pOne.vue';

  export default {
    ***ponents: {
      '***p-one': ***pOne
    }
  }
</script>

***pOne.vue 组件现在仅在 App.vue 中可用。

如果您在开发模式下运行应用程序并尝试在 ***pTwo.vue 内部使用 ***pOne.vue，您会收到一条警告：

总结

本文介绍了Vue本地组件的使用，如有问题欢迎私信和评论