Vue Code组件

　　一、什么是组件？

• 我们将一个完整的页面分成很多个组件。
• 每个组件都用于实现页面的一个功能块。
• 而每一个组件又可以进行细分。

      二、组件的使用分成三个步骤：

1. 创建组件构造器
2. 注册组件
3. 使用组件。

 

 三、父组件 子组件

 

父子组件错误用法：以子标签的形式在Vue实例中使用

• 因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
• 该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了） <child-cpn></child-cpn>是只能在父组件中被识别的。
• 类似这种用法，<child-cpn></child-cpn>是会被浏览器忽略的。

 

Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。

props基本用法

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

 

父子组件的访问方式： $children

父子组件的访问方式： $refs

父子组件的访问方式： $parent

 

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性

让使用者可以决定组件内部的一些内容到底展示什么。

 

 

插槽

具名插槽

 

 

作用域插槽

 

 

　　slot翻译为插槽：

• 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
• 插槽的目的是让我们原来的设备具备更多的扩展性。
• 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。