vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

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