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