组件的基本操作（组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件）

组件基本操作

版本控制

仓库

版本

分支

代码

对已有的仓库

git clone MrFruite: 电商项目:分支名称

对新创建的项目

项目初始化

vue create

vue-cli3 为开发者提供了一个图形化的创建项目的界面。

vue ui

组件通信

组件通信是基于组件的嵌套关系

创建项目

父子关系

1、调用子组件标签

2、在标签上自定义属性，绑定要传递的值

3、子组件使用props接受自定义的属性

4、子组件调用props当中的名称

props变量类型校验

props的变量可以读，不可以修改

子父关系

非父子关系

非父子传参的思路实际上是在用一个新的vue对象进行传参。

定义一个空的vue对象用来做数据传递的载体

插槽

在原有格式基础上，为开发者提供自定义可能。

学习插槽的时候要站在组件开发者的角度上。

在组件当中开辟一块调用时候可以自定义空间

匿名插槽

在组件当中定义一个slot标签进行占位

在调用组件的时候，组件标签的内容会传递到slot占位的位置上

具名插槽

在定义slot标签的时候指定name属性

在调用组件传递插槽内容的时候需要指定slot属性，映射slot标签的name属性

作用域插槽

就是在组件内通过 slot标签绑定自定义的属性，将参数传递出来

在调用组件的过程当中，可以使用templte标签的v-slot进行接收

注意：

1、通常会以$props接受组件传入插槽的数据。

2、老板本的v-slot 是 slot-scope,后来被替换。

Mixin混写

在编程当中，mixin是混合的意思，通常使用面向对象。在面向对象过程当中，有时候需要继承某个类的方法，但是不需要继承这个类的类型，对于这样的情况，大家约定俗成将这样的类写为mixin混合类。

站在整个项目的角度上，所有组件都需要由vue结构部分，而大部分组件可能有共性的功能，所以，把共性的部分抽象出来，之后调用。

如果混入后从新定义混入的方法，二者功能全部实现。

VUE+JQuery开发

VUE基于数据驱动的框架。

JQuery 降低了js的操作难度，主要优势在DOM操作。

VUE和JQuery并不是很契合

下载安装JQuery

npm install jquery -S

jquery的使用方法

虚拟DOM操作

vue通常不操作DOM元素，但是如果遇到操作dom的场景，也不必使用jquery, vue提供了虚拟dom技术，ref技术

在vue当中，可以通过ref属性操作所有的dom元素以及组件。

vue可以使用虚拟dom计算操作组件在内的所有标签。

动态组件

通过component标签和is属性，动态加载指定的组件

案例

代码见git