• 创建组件

1.使用 Vue.extend 来创建全局的 Vue 组件 template 内的模板只能有一个根元素

var com1 = Vue.extend({
    template: '<h3>这是使用 Vue.extend 创建的组件</h3>'//通过  template 属性，指定了组件要展示的HTML结构
})

2.使用 Vue.component( '组件的名称' ,创建出来的组件模版对象)

Vue.component('myCom1', com1)

3.如果要使用组件，直接把组件的名称，以 html 标签的形式，引入到页面中，如果使用了驼峰命名，则在引用组件时，把大写驼峰改为小写字母，同时两个单词直接用 "-" 链接

<my-com1></my-com1>

4 可将第一步和第二部合并

Vue.component('myCom2',
    Vue.extend({
    template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
}));

5 template 内可以传个 id 指定模板元素

<template id="tmp2">
    <div>
    <h3>好用!不错</h3>
    这是通过 私有的 template 元素,在外部定义的组件结构,这个方式有代码的提示
    </div>
</template>


Vue.component('myCom2',
    Vue.extend({
    template: '#temp'
}));

• 私有组件

在 Vue 实力内直接使用 components 钩子函数来定义组件，用法和全局组件一样

components: {
    login: {
        template: '<h1>这是私有的组件</h1>'
    },

    mycon4: {
        template: '#tmp2'
    }
},

组件中的 data 和 methods
组件内的 data 为一个 function ,vm实例内的 data 为一个对象
组件内的 data 的function 必须 return 一个对象
组件内的 data 的使用方式和 vm实例内的 data 使用方式完全一样

components: {
    mycom: {
        template: '#tmp',
        data() {
            //为了防止多个组件调用相同的属性，为了闭包
            //所以每次创建组件都会用创建一个新的对象返回来用
            return {  }
        }
    }
}

组件之间的切换

<a href="" @click.prevent="comName='loading'">登陆</a>
<a href="" @click.prevent="comName='reg'">账号登陆</a>
<a href="" @click.prevent="comName='loadinqq'">QQ登陆</a>
<a href="" @click.prevent="comName='loadinweichat'">微信登陆</a>
Vue 提供了 component 来展示对应组件的显示
component 是一个占位符,:is 属性 ,可以用来指定要展示的组件的名称
<component :is="comName"></component>

需要在Vue内定义
data: {
    comName: 'loading'//通过修改comName来实现切换组件
    },
    components: {
        reg: {
          template: '#register'

        },

        loading: {
          template: '#loadIn'
        },

        loadinqq: {
          template: '#QQloading'
        },


        loadinweichat: {
          template: '#WeiChatloading'
        },
      } -->

组件的动画
transition 可以通过 mode来设置播放顺序 
    <transition mode="out-in">
        <component :is="comName"></component>
    </transition>

• 组件之间传值

子组件 取 父组件的值

1. 如果想获取 父组件 的属性需要在组件的标签上 绑定一个属性，
   属性的内容为 父组件 的属性

<mode v-bind:parentmsg="msg"> </mode>

2. 然后在子组件内 的 props 属性（为数组）定义出来。

components: {
    mode: {
      props: ['parentmsg'],
    }
}

3. 获取到的属性可以直接获取使用（但是该属性为只读）

components: {
    mode: {
        template: '<p @click="change">是子组件----{{parentmsg}}</p>',
        props: ['parentmsg'],
    }
} 

data 内的属性为私有的，组本身可读可写。传递过来的父组件的属性为只读，不可以进行修改

子组件调用父组件的方法，以及传值

1.在子组件上 绑定

<tmp @fun='show(Vaul1,vaul2)'></tmp>

2.在子组件上 利用 .$emit 方法调用 ,并且可以通过后面的形参传值

this.$emit('FunctionName',Vaul1,vaul2)

components: {
    tmp: {
      template: '#tmp',
      data() {
        return {
          a: '123'
        }
      },
      methods: {
        myclick() {
          // console.log('点击了子节点按钮');
          this.$emit('fun', this.a)
        }
      }
    }
  }