Vue组件通信方式

1.props通信

1.1在 Vue 2 中使用 props 通信

注意:props传递的数据是只读的,子组件修改,不会影响父组件

1.1.1.定义 props

在子组件中使用 props 选项来定义要接收的属性

// 子组件

1.1.2.传递props

在父组件中使用子组件时，通过将属性绑定到子组件的属性名来传递数据。

// 父组件
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
}
script>

1.1.3.接收props

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

1.2在Vue3中使用props通信

在 Vue 3 中，props 的使用方式与 Vue 2 类似，但有一些额外的特性，如默认值和类型校验的语法略有不同。

1.2.1.定义props

// 子组件

1.2.2.传递props

// 父组件
 
<script setup>
import ChildComponent from './ChildComponent.vue';
 
const parentMessage=ref('Hello from parent!')
script>

1.2.3.接收props

// 子组件
 
<script setup>
const props = defineProps({
      message: String
    });
 
//或者
const props = defineProps(['message']);
 
script>

2.自定义事件

2.1在vue2中使用自定义事件

2.1.1.触发自定义事件

在子组件中，使用 $emit 方法触发一个自定义事件。

// 子组件
 
<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event-name', eventData);
    }
  }
}
script>

2.1.2.监听自定义事件

在父组件中，通过在子组件上使用 v-on（或简写为 @）来监听自定义事件。

// 父组件
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(eventData) {
      // 处理自定义事件触发的逻辑
    }
  }
}
script>

2.2在 Vue 3 中使用自定义事件通信

2.2.1.触发自定义事件

在子组件中，首先，我们导入了 defineEmits 函数，然后使用它来定义可触发的自定义事件，就像之前的示例一样。接下来，我们创建了 emitCustomEvent 函数来触发自定义事件。请注意，eventData 是事件数据的占位符，您可以根据需要替换为实际的事件数据。

 
<script setup>
import { defineEmits } from 'vue';
 
// 使用 defineEmits 定义可触发的自定义事件
const emits = defineEmits(['custom-event-name']);
 
// 创建一个函数来触发自定义事件
const emitCustomEvent = () => {
  emits('custom-event-name', eventData);
};
script>

2.2.2.监听自定义事件

我们在父组件的