Vue组件创建和传值

首先我们定义一个组件并接收

        var com1 =Vue.extend({            template:"这是通过Vue.extend创建的组件"
        });

然后我们全局注册这个组件

        Vue.component('mycom1',com1);

这样我们就可以在我们的代码中使用我们的mycom1组件了

需要注意的是，如果我们注册的组件名称是以驼峰命名法来命名的，那么我们在使用的时候将不能使用原本注册时的命名，如下的写法时错误的

//定义
Vue.component('myCom1',com1);

//使用        
            
        
        

我们在使用的时候需要将驼峰命名法的两个单词使用‘-’进行分开，并且更加推荐‘-’左右两端的单词均使用小写，如下

同时我们可以将构造和注册结合在一起

        Vue.component('myCom1',Vue.extend({
            template:"这是通过Vue.extend创建的组件"
        }));

更加简化的方式

        Vue.component('myCom1',{
            template:"这是通过Vue.extend创建的组件"
        });

需要注意的是，我们不管使用哪种方式来定义组件，template中定义的顶级元素只能有一个，否则会出现错误

    
        
        
        
        
        
    
    
        
            
        

    
        这是通过Templete定义的组件，在html代码中有智能提示
    
    
    

需要注意的是，上述的定义方式都是定以的全局Vue对象均可使用，下面我们定义一个私有的组件

Vue对象内部有一个components组件，可以定义我们想要的组件

同时仍然可以使用上述的template方式来定义组件

    
        
        
        
        
        
    
    
        
            
        
    
        这是私有组件配合template方式定义的组件
    
    
    

定义的组件可以有自己的data数据域，但是data必须为一个function且必须返回一个对象格式的数据，除此之外和Vue对象中的data的使用方法完全一致

    
        
        
        
        
        
    
    
        
            
        
    
        这是私有组件配合template方式定义的组件---{{msg}}
    
    
    

    
        
        
        
        
        
    
    
        
            登录
            注册
            
            
        
    
        这是登录组件
    
    
    

不过使用这种方式只能实现两种类型的组件切换

使用component元素进行组件切换

    
        
        
        
        
        
    
    
        
            登录
            注册
            
        
    
        这是登录组件
    
    
    

我们使用定义在data中的属性来切换component中要展示的组件，使用:is来代表最后要展示的组件的值

子组件默认无法直接访问到父组件（对象）中的数据，需要使用v-bind表达式来传递，结合组件的props属性来使用，即可达到父组件向子组件传递数据

    
        
        
        
        
        
    
    
        
            
        
    
        这是私有组件配合template方式定义的组件--{{parentmsg}}
    
    
    

需要注意的是，通过props传递过来的数据是不推荐被修改的，强行修改会报错

props中定义的属性全部都是由父组件传递给子组件的

而子组件data中的数据是组件私有，可以被修改的

子组件向父组件传值是通过父组件向子组件传递事件实现的

从如上代码可知，父组件调用子组件中的数据需要借助this.$emit来进行传递，传递的第一个参数都是函数名，后面的参数都是传递的数据，可以传递单个属性或者是对象

作者：镇屌要逆袭
链接：https://www.jianshu.com/p/393abd60a6ac