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

组件基本操作

版本控制

仓库

版本

分支

代码组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第1张图片

对已有的仓库

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

对新创建的项目

项目初始化

vue create

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

vue ui

组件通信

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

创建项目

父子关系

1、调用子组件标签

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

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

4、子组件调用props当中的名称组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第2张图片

props变量类型校验组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第3张图片

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

子父关系组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第4张图片

非父子关系

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

定义一个空的vue对象用来做数据传递的载体组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第5张图片组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第6张图片

插槽

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

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

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

匿名插槽

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

在调用组件的时候,组件标签的内容会传递到slot占位的位置上组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第7张图片

具名插槽

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

在调用组件传递插槽内容的时候需要指定slot属性,映射slot标签的name属性组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第8张图片

作用域插槽

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

在调用组件的过程当中,可以使用templte标签的v-slot进行接收组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第9张图片

注意:

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

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

Mixin混写

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

站在整个项目的角度上,所有组件都需要由vue结构部分,而大部分组件可能有共性的功能,所以,把共性的部分抽象出来,之后调用。组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第10张图片

如果混入后从新定义混入的方法,二者功能全部实现。组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第11张图片

VUE+JQuery开发

VUE基于数据驱动的框架。

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

VUE和JQuery并不是很契合

下载安装JQuery

npm install jquery -S

jquery的使用方法组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第12张图片

虚拟DOM操作

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

在vue当中,可以通过ref属性操作所有的dom元素以及组件。组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第13张图片组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第14张图片

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

动态组件

通过component标签和is属性,动态加载指定的组件组件的基本操作(组件通信、插槽、Mixin混写、VUE+JQuery开发、虚拟DOM操作、动态组件)_第15张图片

案例

代码见git

你可能感兴趣的:(Vue,vue.js,组件化)