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