Vue组件中的父子传参,子父传参,兄弟传参,以及事件总线

vue中的组件传参方式还是蛮多的,但是理解以后发现是非常很简单的,所以我在这里就做一个很简约的总结,首先是父子传参

父子传参

父组件中的代码

<template>
  <div>
    <!-- :getname 是自定义的 -->
    <son-1 :getname="name"></son-1>
  </div>
</template>

<script>
import Son1 from '@/components/Son1.vue'
export default {
  components: { Son1 },
  data() {
    return {
      //父组件的值
      name: '荷兰猪冯',
    }
  },
}
</script>

子组件通过props接收父组件的值

<template>
  <div>
    <div>{{ getname }}</div>
  </div>
</template>

<script>
export default {
  props: ['getname'],
}
</script>

然后是子父传参,在子组件中的代码如下

<script>
export default {
  data() {
    return {
      name: '我是一只荷兰猪',
    }
  },
  methods: {
    goTo() {
      //通过$emit的进行传递
      //toFather:自定义事件名称
      //this.name 要传递给父组件的值
      this.$emit('toFather', this.name)
    },
  },
  mounted() {
    this.goTo()
  },
}
</script>

在父组件中接收方式如下

<template>
  <div>
    <div>子组件的值:{{ name }}</div>
    <!-- @toFather:子定义的事件名称 getname:父定义的事件处理函数 -->
    <son-1 @toFather="getname"></son-1>
  </div>
</template>

<script>
import Son1 from '@/components/Son1.vue'
export default {
  components: { Son1 },
  data() {
    return {
      name: '',
    }
  },
  methods: {
    //处理事件函数,此时参数就是子组件传递的值
    getname(e) {
      this.name = e
    },
  },
}
</script>

当然还可以通过 this.$parent.父组件变量名称  最为简单粗暴的方式来完成子父传参,违背了官方的 单向数据流原则, 但好用

 this.$parent.fatherName = this.name

好了,接下来就是兄弟组件之中传参的方式了

我们可以通过 兄弟组件依赖共同的父元素 实现中转

son1通过.$emit的方法传递给父元素,然后父元素在传递给son2 ,最后son2通过父子传参的方式,用props接收参数,代码如下

<template>
  <div>
    <div>This is son1</div>
    <div>son1的name:{{ name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '吃荷兰猪啊',
    }
  },
  methods: {
    toFather() {
      this.$emit('gotoFather', this.name)
    },
  },
  mounted() {
    this.toFather()
  },
}
</script>

然后父组件接收son1传递的参数,最后父组件再传递给son2,就是实现了兄弟组件的传参

<template>
  <div>
    <div>父亲获取儿子1的值{{ fatherName }}</div>
    <!-- gotoFather:son1定义的事件 -->
    <!-- getname:处理gotoFather的函数 -->
    <son-1 @gotoFather="getname"></son-1>
    <hr />
    <hr />
    <!-- :name给son2传递的方法名 -->
    <!-- fatherName:传递的值 -->
    <son-2 :name="fatherName"></son-2>
  </div>
</template>

<script>
import Son1 from '@/components/Son1.vue'
import Son2 from '@/components/Son2.vue'
export default {
  components: { Son1, Son2 },
  data() {
    return {
      fatherName: '',
    }
  },
  methods: {
    getname(e) {
      this.fatherName = e
      console.log(e)
    },
  },
}
</script>

<style lang="scss" scoped></style>

还有一种就是通过事件总线的方式来进行传递

加入son3组件要传值给所有组件,以前父组件

事件总线- 实现任意关系的组件传参

通过 this.$root.$emit('bus', '事件总线:' + newValue)的方式来进行传递,第一个参数"bus"是自定义的事件名,第二参数是传递给事件的具体参数,.$emit:触发自定义事件

son3代码如下

<template>
  <div>
    <button @click="num++">num:{{ num }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    }
  },
  watch: {
    num(newValue, oldValue) {
      this.$root.$emit('bus', '事件总线:' + newValue)
    },
  },
}
</script>

其他组件或者父组件接收方式如下

// $on: 当 参数1 名称的事件触发时, 触发参数2的函数

此外$off是关闭事件总线,不触发函数

<script>
export default {
  data() {
    return {
      num: '',
    }
  },
  mounted() {
    this.$root.$on('bus', value => {
      this.num = value
      console.log(value)
    })
  },
}
</script>