一、通过对象字面量的形式，定义一个组件模板对象

首先创建组件，同时为这个组件起一个名称，并且利用标签形式，在页面中直接引入这个组件，同时还要在父组件中声明定义。

//这个是vue模板
<div id="app">
      <com1></com1>
  </div>
//这个是组件模板
  <template id="tmp1">
      <div>   //指定的唯一的根容器
          <h1>这是子组件</h1>
      </div>
  </template>

注意：通过一个指定的id "tmp1"来表示要去加载这个指定id的tmplate元素中的内容，用来当做组件的html结构。

<script>
    var com1 = {
        template: '#tmp1',  //子组件的名称
    }
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',   //vue的名称
      data: {},
      methods: { },
      components: {   //通过私有创建的方式在父组件中声明
          com1
      }
    });

  </script>

结果：

定义子组件

二、父组件向子组件传值

注意：子组件默认无法访问到父组件中的data的数据和methods中的方法
解决：父组件可以在引用子组件的时候，通过属性绑定的形式（v-bind），把需要传递给子组件的数据，以属性绑定的形式传递到子组件内部，供子组件使用。

1.先在父组件中定义要传输的值

我们在此时设置了一个msg

var vm = new Vue({
      el: '#app',
      data: {
          msg: '这是父组件中的值',
      },
      methods: { },
      components: {
          com1
      }
    });

2.在父组件中绑定

注意1：把父组件传递过来的msg属性，现在props数组中定义一下，才能使用。
在此我们定义为parentmsg

    var com1 = {
        template: '#tmp1',
        props: ['parentmsg'],//只读
    }

  <div id="app">
      <com1 v-bind:parentmsg="msg"></com1>
  </div>

注意2：组件中props所有的数据都是由父组件传递给子组件的
结果：

传递父组件的值

三、子组件通过事件调用向父组件传值

1.先在子组件中定义数据

 var com1 = {
        template: '#tmp1',
        props: ['parentmsg'],
        data(){
            return{
                msg: '我是子组件里的值'
            }
        },
    }

2.在子组件中绑定方法

  <template id="tmp1">
      <div>
          <h1>这是子元素------{{parentmsg}}</h1>
          <input value="向父组件中传递消息" type="button" @click="sendMsg">
      </div>
  </template>

3.在子组件中定义方法，通过emit

    var com1 = {
        template: '#tmp1',
        props: ['parentmsg'],
        data(){
            return{
                msg: '我是子组件里的值'
            }
        },
        methods: {
            sendMsg(){
                this.$emit('func', this.msg)
            }
        }
    }

4.在父组件中定义方法

  <div id="app">
      <com1 v-bind:parentmsg="msg" @func="msgFormson"></com1>
  </div>

5.在父组件的实例中编写方法

在此定义了一个变量用来接收子组件中的值

var vm = new Vue({
      el: '#app',
      data: {
          msg: '这是父组件中的值',
          msgformson: ''
      },
      methods: {
          msgFormson(data) {
              this.msgformson = data
              console.log(this.msgformson)
          }
      },
      components: {
          com1
      }
    });

结果：