父子组件传值

在Vue中，父子组件之间的传值可以通过以下几种方式实现1：

父组件向子组件传值(Props)2

  1. 定义父组件 3：

  • 在父组件中，通过components选项引入子组件，并在data中定义需要传递给子组件的值4。

  • 使用v-bind指令将父组件的数据绑定到子组件的属性上5。

  1. 定义子组件 3：

  • 在子组件中，通过props选项声明预期的数据类型和名称5。

  • 子组件通过props接收父组件传递的数据2。

子组件向父组件传值(emit)

  1. 子组件 3：
  • 使用this.$emit方法触发一个自定义事件，并将需要传递的值作为参数传递给父组件1。
  1. 父组件 3：
  • 在父组件中监听子组件触发的自定义事件，并处理传递过来的数据6。

注意事项

  • 当传递的数据是对象或数组时，传递的是引用，子组件对这些数据的修改会影响到父组件中的数据。

  • 如果需要在子组件中修改数据，建议使用深拷贝来避免影响父组件的数据7。

  • 在子组件中，可以通过$emit触发事件，并在父组件中通过v-on监听该事件6。

示例代码

父组件向子组件传值3 

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'；

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }；
  }
}
</script>

子组件向父组件传值3 

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

以上示例展示了如何在Vue中实现父子组件之间的传值6。

Top
×
×