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

  • Post author:
  • Post category:vue


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


方法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:字母)

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

子组件B通过props接收该值

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

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

需要注意的是:

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

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

所以,在使用scrollElement()方法的时候:


方法2:bus总线传值

思路:在Vue的原型上创建一个属性bus,该属性的值为new Vue(),即bus也是一个vue实例

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

第二步:在子组件A中,通过bus总线抛出信息和值。

this.bus就是Vue实例,$emit也是上面的方法

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

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

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

data中:

生命周期函数中:


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


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


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

比如:bus在vuex中使用:

A组件:

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

B组件:

<script>
export default {
    data () {
      return {
        busValue: this.$store.state.login ,//(2)从store中获取该值
      }
    },
    methods: {
      handleClick () {
        console.log(this.busValue)
      }
    },
    created () {
      var localValue;
     this.bus.$on('busEvent', res => {
        localValue = res//当bus触发时,这里生效,将busValue值修改了,
                            //但是,当点开该页面路由组件的时候,data函数初始化了busValue值
        this.$store.state.login = res; //(1)将该值存在store中
      })
    }
    
}
</script>

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

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

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



版权声明:本文为zyz00000000原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。