一、组件的创建方式
①使用 Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' }) Vue.component('myCom1', com1);
②直接使用 Vue.component 创建出来的组件
Vue.component('mycom2', { template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3<span>123</span></div>'})
③在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构
<template id="tmpl"></template>
Vue.component('mycom3', {template: '#tmpl'})
<mycom3></mycom3><!--这种方式写组件，有提示，而且内容比较多时分配写到外面，观感更佳-->
④创建私有组件
components: { login: { template: '<h1>这是私有组件</h1>'}}
<login></login>
注意：不论是哪种方式创建出来的组件,组件的 template ,属性指向的模板内容,必须有且只能有唯一的一个根元素
二、组件中的data和methods
组件里的data：
①组件可以有自己的 data 数据
②组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
③组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行
④组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样
示例：
data: function () { return { msg: '这是组件的中data定义的数据' } }
组件里的methods：
methods: { increment() { this.count++ } }
三、组件的切换
常见
<login v-if="flag"></login> <register v-else="flag"></register> <a href="" @click.prevent="flag=false/true">注册</a>
Vue提供了 component ,来展示对应名称的组件
<component :is="comName"></component><!--component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称--> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a>
四、父子组件的单向通信
注意：默认子无法获得父的data数据和methods方法
父向子传递值（data）：
①父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
<com1 v-bind:parentmsg="msg"></com1>
②再把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
props: ['parentmsg']
③使用
template: '<h1>这是子组件---{{parentmsg}}</h1>';
父向子传递方法（methods）
①父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
<com2 @func="show"></com2>
②私有组件的话，不用注册，外部组件需要在用到父组件注册一下
③当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？
this.$emit('func', this.sonmsg)
五、获取DOM节点和组件的引用
①给节点或组件写下ref标记，并起名字，ref="myh3"
②调用：通过this.$refs.myh3调用，可调用组件的data和methods，this.$refs.mylogin.msg