js_脚本之家,爬坑之路

构件是 Vue.js
最强盛的作用。组件能够打包可选用的代码,通过传播对象的不如,达成组件的复用,但组件传值就改为贰个内需减轻的难题。

 Vue
的零部件功能域都以孤立的,不容许在子组件的模版内一向援引父组件的数码。必需接受一定的主意本领落实组件之间的多少传递。

1.父构件向子组件传值

首先用 vue-cli 创造三个类别,个中 App.vue
是父组件,components 文件夹下都以子组件。

组件实例的作用域是孤立的。那象征无法在子组件的沙盘模拟经营内一直援引父组件的数码。要让子组件使用父组件的数额,大家须求通过子组件的props选项。

图片 1

子组件要求从父组件获取 logo 的值,就须要利用 props: [‘logo’]

 

2.子组件向父组件传值

一、父组件向子组件传递数据

子组件重视透过事件传递数据给父组件。

在 Vue 中,能够动用 props 向子组件传递数据。

在那之中 transferUser 是叁个自定义的风浪,this.username
将透过这一个事件传递给父组件 。

 

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

子组件部分:

3.路由传值

图片 2

接受时,在生命周期created赋值。

那是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量。

4.经过localStorage大概sessionStorage来存款和储蓄数据

假定需求从父组件获取 logo 的值,就须求运用 props: [‘logo’]

5.Vuex

图片 3

在选拔复杂时,推荐应用vue官方网址推荐的vuex。

在 props 中增添了成分之后,就没有要求在
data 中再增多变量了

 

 父组件部分:

图片 4

在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量
logoMsg

图片 5

 

下一场就会将App.vue中 logoMsg 的值传给 header.vue 了:

图片 6

 

 

二、子组件向父组件传递数据

 子组件主要透过事件传递数据给父组件

 

子组件部分:

 图片 7

这是 login.vue 的 HTML 部分,当<input>的值爆发变化的时候,将
username 传递给 App.vue

第一声贝拉米(Bellamy卡塔尔个了艺术 setUser,用 change 事件来调用 setUser

图片 8

在 setUser 中,使用了 $emit 来遍历 transferUser
事件,并返回 this.username

里头 transferUser 是二个自定义的事件,效能相似于一个转折,this.username
将由此这几个事件传递给父组件

 

父组件部分:

图片 9

在父组件 App.vue 中,注解了一个办法 getUser,用 transferUser 事件调用
getUser 方法,获取到从子组件传递过来的参数 username

 

图片 10

getUser 方法中的参数 msg 正是从子组件传递过来的参数 username

图片 11

 

三、子组件向子组件传递数据

Vue
未有直接子对子传参的措施,提议将索要传递数据的子组件,都统一为三个零件。假如一定必要子对子传参,能够先从传到父组件,再传到子组件。

为了便于开荒,Vue 推出了二个处境处理工科具
Vuex,能够很实惠完毕组件之间的参数字传送递

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注