vue 如何在项目中使用父子组件（webpack模块系统）

最新推荐文章于 2024-01-18 21:33:03 发布

灵灵7

最新推荐文章于 2024-01-18 21:33:03 发布

阅读量825

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_41796631/article/details/89054001

vue 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用父子组件，通过在App.vue作为子组件，zujian.vue作为父组件，配合main.js文件进行组件的导入和注册。在父组件中引入并注册子组件，然后在main.js中引入和注册父组件，最后在HTML文件的根元素中使用父组件，实现了网页的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用 npm 方法安装 vue 初始项目

用法：在父组件中嵌套子组件，并在项目中使用父组件

子组件 App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"><p ><h3 style="color:aqua">我是APP.VUE组件（子组件)</h3></p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

父组件 zujian.vue

import 导入子组件 app.vue
在父组件中注册 components: {'app': app}

<template>
    <div style="color:brown"><h2>我是一个zujian组件（父组件）</h2>
      <app></app>
    </div>
</template>

<script>
import app from '../App' //引入子组件

export default {
  name: 'zujian',
  components: {
    'app': app
  }
}
</script>

main.js 文件

引入 vue
引入父组件
在实例中注册组件 components: {zujian}
import Vue from 'vue'
import zujian from './components/zujian'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {zujian}
})

html 文件

在根元素（<div id=''app">）中使用父组件 <zujian>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>firstvue</title>
  </head>
  <body>
    <div id="app">
     <div style="color:red"><h1>我是html根元素中的内容</h1></div>
      <zujian></zujian>
    </div>
  </body>
</html>

网页渲染效果：