一文快速详解前端框架 Vue 最强大的功能

综艺节目 浏览(1651)
mg电子游艺平台

对前端框架Vue最强大功能的快速而详细的解释

90d94fa2c599434db841d1c533756630.jpeg

作者|浪里行

编辑|胡伟

组件是vue.js最强大的功能之一,组件实例的范围彼此独立,这意味着不同组件之间的数据不能相互引用。通常,组件可以具有以下关系:

39ae6f167d6448dea316bcd17898c766.png

如上图所示,A和B,B和C,B和D都是亲子关系,C和D是兄弟姐妹,A和C是代际关系(可能由多代分开)。

如何为不同的使用场景选择有效的通信方法?这是我们要探索的主题。本文总结了几种在vue组件之间进行通信的方法,例如props,$ emit/$ on,vuex,$ parent/$ children,$ attrs/$ listeners和provide/inject,以说明易于使用的差异。理解例子。并使用现场,希望能帮到一点帮助。

这篇文章的代码请拨打https://github.com/ljianshu/Blog,论文将走到尽头,大家都会尝试敲代码!

方法一,道具/$ emit

父组件A通过props传递给子组件B,B到A通过$发射器上的ve实现,B组件中的组件。

1.父组件将值传递给子组件

接下来,我们使用一个示例来说明父组件如何将值传递给子组件:如何获取子组件中的父组件App.vue中的数据Users.vue用户: ['Henry','Bucky', '艾米莉']

//App.vue父组件

//以前的自定义名称方便子组件调用,后者传递数据名称

<>

从'http://www.sohu.com/a/components/Users'

导入用户

导出默认值{

名称:'App',

数据(){

返回{

用户: ['亨利','巴基','艾米丽']

}

},

组件: {

'用户':用户

}

}

//用户子组件

{{user}} //迭代传递的值并将它们渲染到页面

<>

Exportdefault {

名称:'HelloWorld',

道具: {

Users: {//这是父组件中子标记的自定义名称

输入:数组,

必需:是真的

}

}

}

>

简介:父组件通过props将数据传递给子组件。注意:组件中有三种形式的数据:数据,道具,计算

2.子组件将值传递给父组件(通过事件表单)

接下来,我们使用一个示例来说明子组件如何将值传递给父组件:当我们单击“Vue.js Demo”时,子组件将值传递给父组件,并且文本从原始组件更改“传递值”到“子项将值传递给父组件,该组件实现将子组件传递到父组件值。

0dc526392c104ce89a55f338d5ebf577.jpeg

//子组件

{{title}}

//绑定点击事件

<>

Exportdefault {

名称:'app-header',

数据(){

返回{

'Vue.js Demo'

}

},

方法: {

changeTitle(){

这。$ emit('titleChanged','子组件的子传递值'); //自定义事件传递值“子级到父级值”

}

}

}

>

//父组件

//与子组件titleChanged自定义事件

一致

//updateTitle($ event)接受

中传递的文本

{{title}}

<>

importHeader来自'http://www.sohu.com/a/components/Header'

Exportdefault {

名称:'App',

数据(){

返回{

'传递了一个值'

}

},

方法: {

updateTitle(e){//声明此函数

This.title=E;

}

},

组件: {

'app-header': Header,

}

}

>

简介:子组件通过事件将消息发送到父组件,事件实际上是子组件将其自己的数据发送到父组件。

方法二,$ emit/$ on

此方法使用空Vue实例作为中央事件总线(事件中心),用于触发事件和侦听事件,并智能和轻松地实现任何组件(包括父子,兄弟和跨级)之间的通信。当我们的项目很大时,我们可以选择更好的状态管理解决方案vuex。

1.具体实施:

varEvent=newVue();

事件。$ emit(事件名称,数据);

事件。$ on(事件名称,数据=> {});

2.举个例子

假设有三个兄弟组件,即A,B和C组件,以及C组件如何获得A或B组件的数据。

A组件:{{name}}

将数据发送到C组件

B组件:{{age}}

将数组发送到C组件

C组件:{{name}},{{age}}

<>

varEvent=newVue(); //定义一个空的Vue实例

翻={

模板:'#a',

数据(){

返回{

名称:'tom'

}

},

方法: {

发送(){

事件。$ emit('data-a',this.name);

}

}

}

varB={

模板:'#b',

数据(){

返回{

年龄: 20

}

},

方法: {

发送(){

事件。$ emit('data-b',this.age);

}

}

}

VARC={

模板:'#c',

数据(){

返回{

名称:'',

年龄:''

}

},

Mounted(){//在编译模板后执行

事件。$ on('data-a',name=> {

This.name=name; //箭头函数不会在里面生成新的。如果你不使用=>,这就是指事件

})

事件。$ on('data-b',age=> {

This.age=年龄;

})

}

}

Varvm=newVue({

El:'#itany',

组件: {

'my-a': A,

'my-b': B,

'my-c': C

}

});

>

0c18dbc5b4614523b65764a4f71e131a.gif

$ on侦听自定义事件data-a和data-b,因为有时它不确定何时触发事件,通常是在挂载或创建的挂钩中。

方法三,vuex

b46fa2a734794f4bbb7559fc03e362f8.jpeg

1.简要介绍Vuex的原理

Vuex实现单向数据流。它有一个State来存储全局数据。当组件想要在State中更改数据时,必须通过Mutation完成。 Mutation还为外部插件调用提供订户模式以获取状态数据的更新。

当所有异步操作(通常称为调用后端接口以异步获取更新数据)或批量同步操作需要采取Action时,但Action不能直接修改State,或者需要通过Mutation修改State数据。最后,根据State的变化渲染到视图。

2.简要介绍过程中每个模块的功能:

Vue组件:Vue组件。在HTML页面上,它负责接收用户操作等交互操作,并执行调度方法以触发相应的响应操作。

Dispatch:操作行为触发器方法是唯一可以执行操作的方法。

操作:操作行为处理模块,由组件中的$ store.dispatch('action name',data1)触发。然后通过commit()触发对变异的调用以间接更新状态。负责处理Vue Components收到的所有交互。包含同步/异步操作,支持多个具有相同名称的方法,并按注册顺序触发。后端API请求的操作在此模块中执行,包括触发其他操作和提交突变的操作。此模块提供Promise包以支持链接触发操作。

提交:状态更改提交操作方法。提交突变是执行突变的唯一方法。

突变:状态更改操作,由操作中的提交(“突变名称”)触发。这是Vuex修改状态的唯一推荐方式。此方法只能执行同步操作,方法名称只能是全局唯一的。在操作期间,将暴露一些钩子以进行状态监视。

State:页面状态管理容器对象。将数据对象的分散数据集中存储在Vue组件中,这对于统一状态管理是全局唯一的。该页面显示来自对象的所需数据,并使用Vue的细粒度数据响应机制进行有效的状态更新。

Getters:读取状态对象的方法。该模块未单独列出,应包含在渲染中。 Vue Components通过此方法读取全局状态对象。

3.Vuex和localStorage

Vuex是vue的状态管理器,存储的数据是响应式的。但是,它不会被保存。刷新后,它将返回初始状态。当数据在vuex中更改时,特定方法应将数据副本保存到localStorage。刷新后,如果localStorage中保存了数据,请将其取出并替换。商店里的州。

letdefaultCity='上海'

尝试{//用户已关闭本地存储功能,此时添加一个try . catch

如果(!defaultCity){

defaultCity=JSON.parse(window.localStorage.getItem( 'defaultCity'))

}

}赶上(E){}

exportdefaultnewVuex.Store({

州: {

城市: defaultCity

},

突变: {

changeCity(州,市){

State.city=城市

尝试{

window.localStorage.setItem('defaultCity',JSON.stringify(state.city));

//当数据发生变化时,将数据副本保存到localStorage。

} catch(e){}

}

}

})

这里要注意的重要一点是,因为vuex,我们保存的状态是一个数组,而localStorage只支持字符串,所以我们需要使用JSON进行转换:

JSON.stringify(state.subscribeList); //array - >串

JSON.parse(window.localStorage.getItem( 'subscribeList')); //string - >阵列

方法四,$ attrs/$ listeners

1.简介

当多级组件嵌套需要传递数据时,通常的方法是使用vuex。但是如果你只是传递数据,但是不使用vuex处理进行中间处理,那就有点矫枉过正了。还有另一种方法可以为Vue 2.4版本执行此操作 - $ attrs/$ listeners

$ attrs:包含父作用域中prop无法识别(和获取)的功能绑定(类和样式除外)。当组件没有声明任何道具时,它将包含所有父作用域绑定(类和样式除外),并且可以通过v-bind='$ attrs'传递给内部组件。通常与interitAttrs选项一起使用。

$ listeners:包含父作用域中的v-on事件侦听器(不带.native装饰器)。它可以通过v-on='$ listeners'

传递内部组件

接下来我们来看一个跨层次沟通的例子:

//index.vue

浪里行舟

: foo='foo'

: boo='boo'

: coo='coo'

: doo='doo'

Title='前工匠'

>

<>

constchildCom1=()=> import('http://www.sohu.com/a/childCom1.vue');

Exportdefault {

组件: {childCom1},

数据(){

返回{

Foo:'Java',

Boo:'Html',

Coo:'CSS',

Doo:'Vue'

};

}

};

>

//childCom1.vue

Foo: {{foo}}

childCom1的$ Comrs: {{$ attrs}}

<>

constchildCom2=()=> import('http://www.sohu.com/a/childCom2.vue');

Exportdefault {

组件: {

childCom2

},

inheritAttrs: false,//可以关闭未在组件的根元素上自动声明但未在props中声明的属性

道具: {

Foo: String //foo被绑定为props属性

},

Created(){

CONSOLE.LOG(此$ ATTRS); //{'boo':'Html','coo':'CSS','doo':'Vue','title':'Front artisan'}

}

};

>

//childCom2.vue

嘘: {{boo}}

childCom2: {{$ attrs}}

<>

constchildCom3=()=> import('http://www.sohu.com/a/childCom3.vue');

Exportdefault {

组件: {

childCom3

},

inheritAttrs: false,

道具: {

Boo:字符串

},

Created(){

CONSOLE.LOG(此$ ATTRS); //{'boo':'Html','coo':'CSS','doo':'Vue','title':'Front artisan'}

}

};

>

//childCom3.vue

childCom3: {{$ attrs}}

<>

Exportdefault {

道具: {

Coo:字符串,

字符串

}

};

>

64f753d9332d4d90b405c05fdd8a7dae.png

如上图所示,$ attrs表示没有继承数据的对象。格式为{property name:attribute value}。 Vue 2.4提供$ attrs,$ listeners传递数据和事件,跨层组件之间的通信变得更容易。

简单地说:$ attrs和$ listeners是两个对象,$ attrs存储绑定在父组件中的非props属性,$ listeners存储绑定在父组件中的非本机事件。

方法五,提供/注入

1.简介

Vue 2.2.0添加了一个新的API,它需要一起使用,以允许祖先组件向其所有后代注入依赖关系,无论组件层次结构有多深,并且始终在建立上游和下游关系时生效。简而言之:祖先组件通过提供程序提供变量,然后通过后代组件中的注入注入变量。 provide/inject API主要解决跨层组件之间的通信问题,但其使用场景主要是子组件获取上级组件的状态,并建立了主动配置和依赖注入之间的关系。跨层组件。

2.举个例子

假设有两个组件:A.vue和B.vue,B是A

的子组件

//A.vue

Exportdefault {

提供: {

名称:'浪里行舟'

}

}

//B.vue

Exportdefault {

注入: ['name'],

Mounted(){

CONSOLE.LOG(this.name); //在船上挥手

}

}

如您所见,在A.vue中,我们设置了一个提供:名称,该名称是wave的值,用于为其所有子组件提供name变量。

在B.vue中,A组件提供的名称变量是通过注入注入的。在组件B中,变量可以通过this.name直接访问,其值也在空中。这是provide/inject API的核心用法。

请注意,提供和注入绑定不响应。这是故意的。但是,如果你传入一个可听的对象,那么它的对象的属性仍然是响应的 - vue官方文档,所以如果以上A.vue的名称发生变化,那么B.vue的this.name不会是什么会改变仍然是船。

3.提供并注入如何实现数据响应

一般来说,有两种方式:

提供祖先组件的实例,然后在子孙组件中注入依赖项,以便可以在后代组件中直接修改祖先组件实例的属性,但是这种方法的缺点是它会安装许多不必要的东西比如这个实例上的道具。方法

使用2.6最新的API Vue.observable优化响应式提供(推荐)

让我们看一个例子:Sun组件D,E和F得到A组件传递的颜色值,并且可以实现数据响应的变化,也就是说,在A组件颜色变化之后,组件D,E ,F不会改变(核心代码如下:)

85314f3e7ad84805a159ce973eb26a23.png

//一个组件

A 组件

changeColor()'>更改颜色

.

数据(){

返回{

颜色:'蓝色'

};

},

//provide(){

//返回{

{

//color: this.color //以这种方式绑定的数据无响应

//} //A组件颜色变化后,组件D,E,F不会改变。

//};

//},

提供(){

返回{

this //方法1:提供祖先组件的实例

};

},

方法: {

changeColor(color){

如果(颜色){

This.color=颜色;

} else {

This.color=this.color==='蓝'? 'red':'blue';

}

}

}

//方法2:使用2.6最新的API Vue.observable优化响应提供

//provide(){

//this.theme=Vue.observable({

//color:'blue'

//});

//返回{

this.theme

//};

//},

//方法: {

//changeColor(color){

//if(color){

//this.theme.color=color;

//} else {

//this.theme.color=this.theme.color==='blue'? 'red':'blue';

//}

//}

//}

//F分量

<>

Exportdefault {

注入: {

{

//功能组件采用不同的值

默认值:()=>({})

}

}

};

>

虽然提供和注入主要提供高端插件/组件库的用例,但如果您能够熟练地使用它们,那么只需一半的努力就可以实现两倍的结果!

方法六,$ parent/$ children&ref

参考:如果在普通DOM元素上使用,则引用指向DOM元素;如果在子组件上使用,则引用指向组件实例

$ parent/$ children:访问父/子实例

应该注意的是,这两个都是直接获得的组件实例,可用于直接调用组件的方法或访问数据。我们首先看一下使用ref访问组件的示例:

//component-a subcomponent

Exportdefault {

数据(){

返回{

'Vue.js'

}

},

方法: {

sayHello(){

Window.alert( '你好');

}

}

}

//父组件

<>

Exportdefault {

Mounted(){

。constcomA=此$ refs.comA;

CONSOLE.LOG(comA.title); //Vue.js

comA.sayHello(); //弹出窗口

}

}

>

然而,这两种方法的缺点是无法跨班或兄弟进行交流。

//parent.vue

我们想要访问组件-a中引用它的页面的两个组件-b组件(此处为parent.vue)。在这种情况下,我们需要配置其他插件或工具,例如Vuex和Bus。的解决方案。

总结

常见的使用场景可分为三类:

亲子沟通:父子传递数据通过道具传递,子传递给父母是通过事件($ emit);父链/子链也可以通信($ parent/$ children); ref也可以访问组件实例;提供/注入API; $ ATTRS/$听众

交流兄弟:公交车; Vuex

跨层通信:总线; Vuex;提供/注入API,$ attrs/$ listeners

参考文章

珠穆朗玛峰建筑课程(强烈推荐)

密集的Vue.js组件

Vue.js官方文档

Vue开发实战

Vuex数据本地存储

Vuex框架原理和源代码分析

Vue组件通信方法的综合解释

作者简介:郎立兴,硕士研究生,专攻前端,经营个人公共前端工匠,致力于创造一系列高质量的文章,可以迅速被初中和中级吸收工程师。

免责声明:本文是CSDN技术标题的原始提交。未经许可,请勿转载。欢迎您通过以下方式联系提交内容。

看更多