vue2父子组件传值有哪些-前端问答-PHP中文网

vue2父子组件传值有哪些

betcha

发布： 2024-08-20 10:01:51

原创

540人浏览过

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

vue2父子组件传值有哪些

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" />
</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 @click="emitData">Send Data</button>
</template>

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

登录后复制

$emit（父组件）

<template>
  <child-component @sendData="receiveData"></child-component>
</template>

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

登录后复制

以上就是vue2父子组件传值有哪些的详细内容，更多请关注php中文网其它相关文章！