vue中兄弟组件之间的联动，兄弟组件之间的传值

àì夳堔傛蜴生んèń 2022-04-11 08:41 467阅读 0赞

兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作

**方法1：****借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B**

**第一步：**子组件A传值给父组件

**通过$emit将e.target.innerText传递给父组件**

<template>
      <div class="initail">
        <ul>
          <li v-for="(item,key,index) of cities" :key="index"
           @click="handleInitail">{
       {key}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Initail',
      props: {
        cities: Object
      },
      methods: {
        handleInitail (e) {
          console.log(e.target.innerText)
          this.$emit('message', e.target.innerText)
        }
      }
    }
    </script

**第二步：父组件接收子组件A的传值，并将值保存到自己的data中，并取名letter（letter：字母）**

![20181205111815563.png][]

![2018120511151670.png][]

![20181205111527316.png][]

第三步：父组件将letter传递给子组件B

![20181205111847589.png][]

子组件B通过props接收该值

![20181205112026791.png][]

下面就是子组件B监听到letter值的变化后作出反应：用watch对象来监听

补充知识：Better-scroll插件中，提供一个方法，到指定的标签区域，或者说是，让某个指定的dom，出现到屏幕中，展现给用户。

![20181205115834405.png][]

需要注意的是：

![20181205145425876.png][]

上图中div.ct中的ref=“key”，由于此处是循环绑定的dom，所以打印dom的结果：

是个数组，第一位是dom元素

![2018120514592955.png][]

所以，在使用scrollElement()方法的时候：

![2018120515004249.png][]

**方法2：bus总线传值**

思路：在Vue的原型上创建一个属性bus，该属性的值为new Vue（），即bus也是一个vue实例

第一步：在main.js中创建bus总线

![20181205155708403.png][]

第二步：在子组件A中，通过bus总线抛出信息和值。**this.bus就是Vue实例，$emit也是上面的方法**

![20181205155833335.png][]

![20181205155823871.png][]

第三步：在子组件B中，在created或mounted等生命周期函数上，监听那个事件和获取那个值。

![20181205155936850.png][]

注意：bus总线，是联动的，当A组件触动bus总线的时候，B组件中也会响应式的触发。

B组件中的bus，需要在函数中，比如：created函数、mounted函数、甚至是data函数。

data中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

生命周期函数中：

![20190326122707362.png][]

**总之，监听bus总线的事件，必须要函数中，但是该函数执行的时候，跟bus总线无关。**

**路由组件中：两个组件不在一个页面，bus总线即使改变了值，当点击另一个路由路径的时候，data函数又将值初始化了，**

**所以说，bus总线作用的两个组件应该在同一页面中。当然，可以用一个仓库来存储这个改变的值，比如：vuex、webStorage、数据库等等。**

比如：bus在vuex中使用：

A组件：

methods: {
          handleClick () {
            this.bus.$emit('busEvent', this.loginFlag) //1、发出“事件和值”
          }
        },

B组件：

但是，还是有问题：当用户未点击过B路由组件前，点击A路由组件不会触发bus总线，因为，B组件的代码根本没有加载过来。

现在就出现了这种情况：A已经触发了bus总线，B不能监听到bus总线。

所以说，A、B组件还是在一个页面时，可以使用bus总线。

[20181205111815563.png]: /images/20220411/2474f8158ac34d3eb4167abb8aaccbb1.png
[2018120511151670.png]: /images/20220411/f7a3c913cf2949ccbb76ce98a4de1882.png
[20181205111527316.png]: /images/20220411/8198c3a359d84eed9c2faaa481029064.png
[20181205111847589.png]: /images/20220411/e4ea8dad206848b2b082196baadcdfd9.png
[20181205112026791.png]: /images/20220411/ea922bfbbc654b1f9bd593cf2a3a7955.png
[20181205115834405.png]: /images/20220411/5686d53f562c448590ec2603473a89b3.png
[20181205145425876.png]: /images/20220411/e72fd32477374bc98624443ce2dadcdb.png
[2018120514592955.png]: /images/20220411/b74c457501584917b1bd2ef7f94f2454.png
[2018120515004249.png]: /images/20220411/bdb523539c904efc9edce8bf72fff3eb.png
[20181205155708403.png]: /images/20220411/34bd8a3971814a969665cfbedc474bd8.png
[20181205155833335.png]: /images/20220411/8641d6ce11d64b148f54803a2d001a47.png
[20181205155823871.png]: /images/20220411/5503e51fb01447b9ac9ac01548363805.png
[20181205155936850.png]: /images/20220411/02436be5ba5f4a5182c0942381b41c6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220411/c0f359d4f7794abfa313bb84a84543d7.png
[20190326122707362.png]: /images/20220411/1f3acb2e382240dc80980eff15628ac5.png