Vue 组件基础

官方教程: https://cn.vuejs.org/v2/guide

声明组件

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()
来加工父组件传递的值,此种方式虽然能够加工了父组件
传递的数据,但是不会改变父组件的数据,保证了各个组件的独立性(单向数据流)