父子组件数据流动 - Vue 精进指南

2024-02-20 06:09:20

父组件向子组件传递数据

Vue.js 允许父组件向子组件传递数据，传递的数据可以是简单的值，也可以是复杂的对象或数组。父组件通过属性（props）传递数据，子组件通过 props 接收数据。

例如，下面的示例展示了父组件 ParentComponent 如何向子组件 ChildComponent 传递一个字符串 "父组件传递的数据"：

<template>
  <div>
    <ChildComponent message="父组件传递的数据"></ChildComponent>
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

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

子组件向父组件传递数据

子组件向父组件传递数据通常通过事件（emit）实现。子组件通过 emit 方法触发一个事件，并附带需要传递给父组件的数据。父组件可以通过监听子组件触发的事件来接收数据。

例如，下面的示例展示了子组件 ChildComponent 如何使用 $emit 向父组件 ParentComponent 传递一个字符串 "子组件传递的数据"：

<template>
  <div>
    <button @click="handleClick">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', '子组件传递的数据')
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent @message="handleMessage"></ChildComponent>
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      // 在这里处理从子组件接收到的数据
      console.log(message)
    }
  }
}
</script>