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

用 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>

网页渲染效果：

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

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

子组件 App.vue

父组件 zujian.vue

main.js 文件

相关推荐