12.18 父子组件传参

组件：

html、CSS、js的集合体，为该集合体命名，用该名字复用html、CSS、js组成的集合体

（复用性）

1.组件分类：

• 根组件：new Vue({ }) 生成的组件,顶级组件
• 局部组件：组件名={} ，{}内部采用的是vue语法
• 全局组件：vue.component('组件名',{})，{}内部采用的是vue语法

2.组件的特点：

• 组件都有管理组件html页面结果的template实例成员，template中有且只有一个根标签

• 根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件

• 挂载点不是虚拟DOM，是要被虚拟DOM组件替换的占位符对象
• 局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
• 子组件的数据需要隔离（数据组件化，每一个组件拥有自己数据的独立名称空间）
• 组件中出现的所有变量（模板中、逻辑中），由该组件自己提供管理

• 局部全局和根组件都是一个vue实例，一个实例对应一套html、CSS、js结构，所以实例就是组件(this)

总结：根组件，可以不明确template，template默认采用挂载点页面结构，如果设置了template，挂载点内部内容无效，因为会被替换。

html不识别大小写，html、body标签不能被替换，所以不能作为挂载点

    

        {{ msg }}
    

子组件

声明局部组件：局部组件要在其父组件中注册才能使用

• 声明组件
• 注册组件
• 渲染组件（全局组件不需要注册）

组件的数据局部化

组件传参-父传子

• 子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
• 子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，可以将变量值传递给子组件

• 自定义组件标签的事件
  • 自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
  • 子组件如何触发自定义事件：this.$emit('自定义事件名'，触发事件回调的参数们)
  • 子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息
  • 子集来触发，父集来实现，父集可以拿到子集内部的数据，因为子集内部的数据不能被修改，自定义的事件不能自动触发，只能手动触发。

    
    


    

        
{{ h1 }}
        
{{ h3 }}

        -->