vue03

组件

组件概念：html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体=>
组件分类：
    跟组件：new Vue({}) 生成生成组件
    局部组件：组件名={},{}内部采用的是vue语法
    全局组件：Vue componnent('组件名'，{})，{}内部采用的是vue语法
    
组件的特点：
    1）组件都有管理组件html页面结果的template 实例成员,template中有且只有一个根标签
    2）跟组件都是作为最顶层的父组件，局部与全局组件作为子组件，也可以成为其他组件与全局组件的的父组件；
    3）子组件的数据需要隔离（数据组件化，每一个组件拥有自己数据的独立名称空间）
    4）局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
    5）组件中出现的所有变量（模板中，逻辑中），都由该组件自己来管理
    6） 局部全局和跟组件都是一个vue实例，一个实例对应一套html、css与js结构，所以实例就是组件

组件介绍（template实例成员）

总结：根组件，可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换
解释：html，body标签不能被替换，所以不能作为挂载点

    
    


    

        {{ msg }}
    

子组件

1、声明组件  2、注册组件  3、渲染组件  => 全局组件不需要注册
局部组件：局部组件要在其父组件中注册才能使用
每个组件中的this代表当前组件，就是当前Vue的一个实例

组件化

组件传值

组件传参：
        父传子：自定义组件属性
        子传父：自定义组件事件

父传子

子传父

自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)

子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息

    
    


    

        
{{ h1 }}
        
{{ h3 }}


        
        
        

        
    

vue_03总结：点我点我