Vue数据传递的三种方式·JavaScript·在父组件中使用子组件并传递数据

作者：人工智能部署 | 发布时间：2025-06-13 |

这种方式就是直接通过Vue实例的属性来传递数据，简单来说，就像是在Vue实例外部的JavaScript代码里直接修改Vue实例的数据属性。

示例代码：

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  }
})

// 在外部JavaScript中修改
app.message = 'Hello, world!';

这种方法的优点是简单直接，但缺点是耦合度高，只适用于同一个页面中Vue实例和外部JavaScript代码紧密耦合的场景。

这是Vue推荐的方式，就像在组件之间传递数据一样。父组件可以通过props向子组件传递数据，适用于组件化开发。

示例代码：

// 子组件
Vue.component('child', {
  props: ['message'],
  template: `{{ message }}`
})

// 父组件

这种方式确保了父子组件之间的单向数据流，保证了数据流动的可控性和组件的独立性。

这种方式适用于兄弟组件之间的通信，就像一个公共的事件中心，让组件之间可以相互传递事件和数据。

示例代码：

// 创建事件总线
const bus = new Vue()

// 触发事件
bus.$emit('someEvent', 'data')

// 监听事件
bus.$on('someEvent', (data) => {
  console.log(data)
})

这种方法避免了父子组件之间过多的嵌套和传递，适合兄弟组件之间的通信。

Vue中传递数据主要有三种方式：通过Vue实例的属性、使用Vue组件的props、通过事件总线。每种方法都有其适用的场景和优缺点，需要根据项目需求和结构来选择合适的方式。

如果项目复杂，可以考虑使用Vuex进行状态管理，以实现更复杂和结构化的数据流动。