如何使 Vue 框架的弟兄组件之间关联起来呢

这篇文章主要讲解了“Vue框架中兄弟组件间联动怎样实现？”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue框架中兄弟组件间联动怎样实现？”吧！

我想要实现当点击字母L，页面定位到L开头的城市名：

1.找到字母表的页面

在html标签绑定一个click事件，在js中定义一个方法，并使用参数e获取点击的字母。当在页面点击时，console出来。

2.通过city这个父页面，进行列表页和字母表页面的值传递

<1>在字母表页定义一个监听方法。

<2>进入city页面，在html中绑定一个监听事件。

在js中编写这个事件的方法：

打开页面，可以看到没有问题，city页面监听到了字母表页面的点击。

<3>city父页面把字母表页面的请求转发给list页面。

首先我们要在city页面定义一个letter变量，然后在方法中定义用这个变量接受letter。

然后还是city页面，我们要在html中绑定这个变量。

3.子组件获取父组件传递过来的值

父组件传递过来了一个letter之后，子组件就要接受这个letter。

首先在list页面中先定义letter，然后利用监听器，一旦letter变化，只要letter不是空，那么就让滚动条滚动到这个元素的起始位置。

最后记得在城市列表区域内注册一个引用信息:ref=key，用来监听你选中的key值。

保存后，实现了联动效果。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!