Vue组件通信

最新推荐文章于 2025-04-01 15:50:36 发布

原创最新推荐文章于 2025-04-01 15:50:36 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

一、vue子组件向父组件传值

子组件向父组件传送值，主要是通过$emit方法来实现的

子组件

子组件通过$emit方法将数据发送给父组件，第一个参数表示在父组件中需要触发的函数名称，第二个参数表示要传递的值

<template>
  <!-- 子组件 -->
  <div>
    <button @click="passData">将数据传递给父组件</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      childData: '我是子组件的数据chilData'
    }
  },
  methods: {
    passData () {
      // this.$emit 接收两个参数，1、父元素接收方法 2、需要传递的数据
      this.$emit('passChildData', this.childData)
    }
  }
}
</script>

父组件
在父组件中触发子组件中派发的函数，获取子组件的值

<!-- 父组件 -->
<template>
  <div>
    <!-- @passChildData  子组件$emit 绑定的方法 -->
    <!-- add 父组件方法 -->
    <h1>父组件</h1>
    <h2>子组件传递过来的数据：{{ message }}</h2>
    <Child @passChildData="add" />
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  data () {
    return {
      message: ''
    }
  },
  components: {
    Child
  },
  methods: {
    add (data) {
      // data 子组件传递过来的数据
      this.message = data
    }
  }
}
</script>

二、vue父组件向子组件传值

父组件向子组件发送数据通过props属性来实现

父组件
将msg传递给子组件，通过v-bind的方式将值绑定到子组件上

<template>
  <!-- 父组件 -->
  <div>
    我是父组件下面是我的子组件
    <Child :childData="msg" />
  </div>
</template>

<script>
// 引入子组件
import Child from './child'
export default {
  components: {
    Child
  },
  data () {
    return {
      msg: '我是父组件的数据'
    }
  }
}
</script>

子组件
通过props属性来接收父组件的传值

<template>
  <!-- 子组件 -->
  <div>
    我是子组件，这是父组件传递过来的数据：{{ childData }}
  </div>
</template>

<script>
export default {
  // 接收父组件传递过来的参数名
  props: ['childData']
}
</script>

三、eventBus 任意两个组件之间传值

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
组件1

<template>
  <div>
    <h1>子组件1</h1>
    <button @click="postData">传</button>
  </div>
</template>

<script>
import bus from './eventBus'
export default {
  data () {
    return {
      childData: '子组件1的数据'
    }
  },
  methods: {
    postData () {
      bus.$emit('passData', this.childData)
    }
  }
}
</script>

组件2

<template>
  <div>
    <h1>子组件2{{ msg }}</h1>
  </div>
</template>

<script>
import bus from './eventBus'
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    bus.$on('passData', (value) => {
      this.msg = value
    })
  }
}
</script>

eventBus

import Vue from 'vue'
export default new Vue()