我有一个hello world Vue应用程序设置和网页包,并有初始应用程序组件的工作和安装到身体.虽然在那个应用程序组件中,我不知道如何使用我制作的更多组件.

main.js

import Vue from 'vue'
import App from './app.vue'
    
new Vue({ 
  el: 'body',
  components: { App }
})

app.vue

<template>
  <div class="message">{{ message }}</div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'Hello World'
      }
    }
  }
</script>

我试过了

import TopBar from './top-bar.vue'

在这两个主要方面.js和应用程序的脚本部分.vue然后try 使用

<top-bar></top-bar>

没有运气.

我想我缺少正确注册组件的方法,比如在Vue文档中:

Vue.component('top-bar', TopBar)

但我认为,当使用带有vue loader的webpack时,我需要做一些不同的事情.

推荐答案

您可以像之前所展示的那样对其进行全局注册,或者如果您想在本地注册,以便在单个组件中使用,则需要将其添加到Vue实例的components对象中:

<template>
  <top-bar></top-bar>
  <div class="message">{{ message }}</div>
</template>

<script>
import TopBar from './top-bar.vue'

export default {
  components: {
    TopBar
  },
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

Vue.js相关问答推荐

当props 的值改变时如何更新类'

Vuetify/Nuxt 生产环境组件在开发环境中无法正常工作

Vuex Mutations 和 Airbnb eslint

将函数作为属性传递给 Vue 组件

如何在vue中动态加载组件

Laravel Vue - 如何让 vue 在公共文件夹中查找图像

Vue @click 不适用于存在 href 的anchor锚标记

怎样1秒后自动隐藏VueJS中的元素

Nuxt:显示静态文件夹中的本map像

vue 在 v-model 之后执行 @click

v-if inside v-for - 在两列中显示项目列表

使用 Vue-cli,我在哪里声明我的全局变量?

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

Vue路由在新页面上回到顶部

克隆元素并附加到 DOM 的正确方法

无法访问函数内的数据属性

如何使用 Vue Test utils 测试输入是否聚焦?

使用 puppeteer 生成 PDF 而不保存

在 Vue 应用程序中创建一个类的单个实例

IOS在输入焦点上显示键盘