官方教程:

声明组件

let myComponent = Vue.extend({    template : '#my',    // 此时的 #my 是id="my"的template标签});// 可以简化为let myComponent = {    template : '#my',    data(){        // 此处的data必须是一个函数    }};

注册组件(全局组件, 局部组件)

// 全局组件: 一次注册在所有的vue实例中(都能够使用Vue.component('my-component',{    template : '#my-component',    data () {        // 此处的data必须是一个函数        },});// 局部组件: 只能在某一个vue实例中使用const vm = new Vue({    'el' : '#app',    components : {        'my-component' : {            template : '#my',            data() {                 // 此处的data必须是一个函数            }        },    }});

注: 为了保证各个组件的相互独立性,所有的组件中的data必须是一个函数

组件之间的通信

• 父组件 => 子组件: props

• 子组件 => 父组件: 发布订阅

• 组件嵌套的情况

• 实例 模态框

    
                 
         
     
    
          
      点击登陆    
      
     
     

• 父组件调用子组件的方法

注: 如果ref放在组件上,那么通过$refs拿到的不是组件的dom而是这个组件

• 在子组件中加工父组件传递的值

默认在子组件中不能修改父组件传递的值,如果非要

加工父组件传递过来的数据,可以使用 computed 属性或者 data()

来加工父组件传递的值,此种方式虽然能够加工了父组件

传递的数据,但是不会改变父组件的数据,保证了各个组件的独立性(单向数据流)