欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue组件的那点事

程序员文章站 2022-05-07 08:16:10
...

当前前端估计没有不知道vue这个渐进式框架,由于它容易上手,支持各种类库,各种优点,成为我们开发单页应用的一个不二之选。下面是我在学习和工作中对组件之间通信和交互方式的归纳,希望对你有所帮助。

父子组件交互

prop(父——>子)

父亲想跟儿子说一句:回来吃饭了。我们可以这么做~~

首先简单创建两个组件一个叫father.vue一个叫child.vue,然后父组件father.vue在页面中引用自组建child.vue格式如下:

然后回到需求本身父亲要跟儿子说回来吃饭了。也就是父组件要向子组件传递一个信息。可以选择prop。简单的来说Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。直观的解释就是:自定义的特性可以在对应使用的那个组件上的props属性获取到

至此我们就实现了父组件与子组件的通信。但值的注意有几点:

由于HTML属性对大小写并不敏感,所以你的自定义属性不能使用大写字母,如果使用可能会导致无法识别
如果你只是想单纯的传递一个字符串格式的数据,可以不使用(v-bind:自定义属性名)的写法。而是直接(属性名=值)

$emit(子——>父)

上面中的场景中提到了父亲叫儿子回来吃饭,但是儿子正在玩游戏需要20分钟之后才能回来,这个时候儿子要告诉父亲说:我在玩游戏,20分钟之后就回来。我们可以这么做~~

使用$emit进行组件通信的方式就像是我们常说的发布订阅,这里子组件要说的话这一行为就是发布,父组件订阅这个事件来获得发布者发布的信息。

至此我们就实现了子组件与父组件的通信。但值的注意有几点: @childtosay的写法是v-on:childtosay的简写,监听/订阅这个方法的意思。
发布和订阅的方法名称必须统一,且不能有大写字母,如果名字过长可以使用短横线在多个单词中连接

slot(父——>子)

父亲等了半个小时,儿子才回来,有点生气。准备跟儿子约法三章:1.每天晚上七点之前必须回来吃饭。2.出去玩之前要征得老爸同意。3.不能离家太远,在附近玩。我们可以这么做~~

现在的需求是我们需要向子组件传递多条数据,可能这些数据在页面显示的时候还要有一定的样式。那么prop的通信方式就不太适用了。这个时候插槽的功能就显得尤为重要了。

当然了如果多个插槽,位置顺序有明显变化的,你可以给它们起一个名字来具体区分:

//father.vue
<child>
<p  class="red"  slot="rouss">每天晚上七点之前必须回来吃饭。</p>
<p  class="red"  slot="rous">出去玩之前要征得老爸同意</p>
<p  class="red"  slot="rou">不能离家太远,在附近玩</p>
</child>
复制代码
//child.vue
<div>
<h5>我是儿子</h5>第1条:
<slot  name="rou"></slot>第2条:
<slot  name="rous"></slot>第3条:
<slot  name="rouss"></slot>
</div>
复制代码

这样也就确保了多个插槽的位置

$parent(子——>父)

如果父亲口袋中有儿子的试卷,但是成绩只有59分,儿子不想被骂,要偷偷改掉试卷的分数,可以尝试这么做~~

老师从小教育我们做人要诚实,所以儿子这样的行为是坚决不可取的,同样的我们在vue的使用中也不推荐这样修改父组件的data数据。

$ref(父——>子)

$parent类似的还有$ref,它可以让你在父组件中访问子组件的属性和值,用法如下:

EventBus (父子,兄弟之间都适用)

爸爸和儿子都想看电视,但是遥控器放在谁的手里另外一方都不同意,这个时候家里的实际*者母亲大人就说:遥控器给我,你们谁要看什么节目跟我说,我给你们安排。这里面母亲大人的角色就是EventBus

EventBus 就是在声明一个vue的实例对象,所有公共的方法和属性都可以放在这个实例上面,这样父子组件就都可以进行访问了,但是如果是大型项目,还是推荐使用vuex

vuex(父子,兄弟之间都适用)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,用法很多,小弟就不在这里献丑了。

写在最后:小弟学艺不精,水平有限,上面的内容是我对vue的一个简单理解,希望对你有所帮助,当然如果你发现哪里有问题,请及时指正,不胜感激。