vue组件

vue 组件：

组件介绍:

组建的构成： 由 template + css + js 三部分组成（.vue文件）

    1.组件具有复用性
    2.复用组件时，数据要隔离
    3. 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别


组件介绍：
    1) 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
    2) 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
    3) 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
    4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
    5) template只能解析一个根标签

template 的使用：

##用法一：把整个vue所关联的内容替换 （根组件）


    {{ msg }}




    由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容

##用法二： 局部组件


        
        
        
        
    


    
局部组件可以分三步：          
    创建组件
    注册组件
    网页中渲染

##全局组件 


    




注意点：

    template中只能有一个根标签,如果有多个,只生效第一个
    template内容如果要多行显示方便观察的话用反引号`来代替双引号或者单引号

组件复用的数据隔离：

局部组件复用：

1. 局部组件中

 

        
        
        
        
    



局部组件的复用：

1.把data里面值放function中当然了function可以不用写省略掉
2.而且不会受vue中msg影响,只受组件中的msg影响

全局组件复用：

2.全局组件中


    

// 这样就是个普通的自定义标签



全局组件的复用：
    1.把data里面值放function中当然了function可以不用写省略掉
    2.而且不会受vue中msg影响,只受组件中的msg影响
    

组件信息父传子：

    




总结：
    父级模板:

    子级模板: props: ['属性名'],

组件信息子传父：

    

        
        留言
    

        
    
    






总结：
    子级模板: x

   子级实例方法中:this.$emit('自定义事件',子级数据们：参数)

   父级模板:

   父级方法: 父级的方法(子级的数据们){处理与子级相关的函数}

 子传父  ： this.$emit ('自定义事件名'，事件触发的回调参数)
 自定义事件 ---》 自定义调用 ，
 系统事件 ----》系统调用