1，在初始文件index.html中加入要引入的模块,注意驼峰命名的方式（我就是没写成驼峰，报错）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-first-vue-project</title> </head> <body> <div id="app"> <com-a></com-a> </div> <!-- built files will be auto injected --> </body> </html>
2，在mian.js可以看见标签<com-a>如何引入
import Vue from 'vue' // import comA from './components/a' import comA from './components/a' new Vue({ el: '#app', components: { comA }, template: '<comA/>' })
3，a.vue（注意，我在a模块加了标签<com-b>,不是html标签，其实就是vue引入新的子组件）
分3步：
- 在父页面（a.vue）上引入写好的组件
import comB from './b' //comB为组件的name
- 注册组件
components:{ //注册组件
comB
},
- 驼峰命名的方式
<com-b> </com-b>
<template> <div> I am a 'a' component <com-b></com-b> </div> </template> <script> import comB from './b' export default { components: {comB} } </script>
页面如何传数据给组件
页面：
<com-a :prop-data="0" > </com-a>
// prop-data 传到组件的数据
组件：
export default {
components: {comB},
props: ['propData']
}
可以用this.propData获取到props（页面传过来的值） 为0