vue2父子组件传值有哪些

vue 2 父子组件传值有如下几种方式：props（自上而下）：父组件通过 props 传值给子组件。$emit（自下而上）：子组件通过 $emit 事件向父组件发送数据。provide/inject（隐式父子通信）：父组件提供值，子组件注入该值。vuex（状态管理）：父子组件共享 vuex 中的数据。ref（模板引用）：父组件通过 ref 获取子组件实例。

Vue 2 父子组件传值方式

Vue 2 中父子组件传值有多种方式，包括：

1. props（自上而下）

• 父组件通过 props 属性将数据传递给子组件。
• 子组件通过 props 接受父组件传递的数据。

2. $emit（自下而上）

立即学习“前端免费学习笔记（深入）”；

• 子组件通过 $emit 事件向父组件发送数据。
• 父组件监听子组件的事件并接收数据。

3. provide/inject（隐式父子通信）

• 父组件使用 provide 提供一个值。
• 子组件使用 inject 注入该值。

4. Vuex（状态管理）

• 使用 Vuex 集中管理数据。
• 父子组件都可以访问 Vuex 中的数据。

5. ref（模板引用）

• 父组件通过 ref 为子组件创建引用。
• 父组件可以使用 ref 访问子组件的实例。

选择合适的方式

选择合适的传值方式取决于具体的场景和数据类型：

• props 和 $emit 最常用于简单的数据传递。
• provide/inject 适用于更复杂的场景，例如需要跨越多个组件层级的通信。
• Vuex 适用于管理复杂且需要共享的大量数据。
• ref 主要用于获取子组件实例，而不是传值。

示例

props（父组件）

<template><child-component :message="message"></child-component></template><script>
  export default {
    data() {
      return {
        message: 'Hello from parent!'
      }
    }
  }
</script>

props（子组件）

<template><p>{{ message }}</p>
</template><script>
  export default {
    props: ['message']
  }
</script>

$emit（子组件）

<template><button>Send Data</button>
</template><script>
  export default {
    methods: {
      emitData() {
        this.$emit('sendData', { name: 'John' })
      }
    }
  }
</script>

$emit（父组件）

<template><child-component></child-component></template><script>
  export default {
    methods: {
      receiveData(data) {
        console.log(data)
      }
    }
  }
</script>