vue2和vue3中props子父组件通信

概念：          

        Vue.js 提供了一种在父子组件之间进行通信的机制，不仅支持父传子，也支持子传父。在 Vue 中，子组件可以通过事件将数据传递给父组件，实现子传父的效果。这种通信机制可以让组件之间更好地协作，实现更灵活的交互。

1.vue2子组件传值给父组件

        在 Vue2 中，子组件可以通过 this.$emit 方法来触发一个自定义事件，并且可以传递数据给父组件。父组件则可以通过在子组件标签上添加事件监听器来接收并处理这些自定义事件。

     我们定义child.vue做子组件

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendDataToParent">向父组件传递数据</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-event', '这是子组件传递给父组件的数据');
    }
  }
}
</script>

 this.$emit这个方法在这里可以理解是映射父组件的自定义事件。
在 Vue 2 中，$emit 方法只能接收一个事件名称和一个可选的数据参数

例如：

this.$emit('event-name', eventData);

其中，'event-name' 是要触发的事件名称，而 eventData 是可选的要传递的数据。

我们定义Parent.vue做父组件

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child @child-event="handleChildEvent"></child>
    <p>从子组件接收到的数据：{{ dataFromChild }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      dataFromChild: ''
    };
  },
  methods: {
    handleChildEvent(data) {
      this.dataFromChild = data;
    }
  }
}
</script>

那么<p></p>标签里面打印的就是：从子组件接收到的数据：这是子组件传递给父组件的数据

在这个示例中，子组件 Child 通过 this.$emit('child-event', data) 触发了一个名为 child-event 的自定义事件，并传递了数据给父组件。父组件 Parent 中通过 <child @child-event="handleChildEvent"></child> 监听了子组件触发的 child-event 事件，并在 handleChildEvent 方法中接收并处理了子组件传递的数据。

通过这种方式，子组件可以向父组件传递数据，实现了子传父的效果。

2.vue2父组件传值给子组件

      在Vue2中，父组件向子组件传递数据可以通过props来实现。Props 是父组件用来传递数据的一个自定义特性。子组件需要显式地声明 props，并且可以通过 props 接收父组件传递的数据

例如：我们还是定义child.vue做子组件

<!-- 子组件 Child.vue -->
<template>
  <div>
    <p>子组件接收到的父组件数据：{{ message }}</p>
  </div>
</template>

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

 我们还是定义Parent.vue做父组件

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

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: '父组件传递给子组件的数据'
    };
  }
}
</script>

       在这个示例中，父组件 Parent 使用 :message="parentMessage" 将 parentMessage 数据作为 props 传递给子组件 Child。在子组件 Child 中使用 props: { message: String } 来声明并接收父组件传递的数据。当父组件的 parentMessage 发生变化时，子组件会自动更新以反映这些变化。

通过这种方式，父组件可以向子组件传递数据，实现了父传子的效果。

3.vue3子组件传值给父组件

换汤不换药，写法原理都差不

<!--这是子组件-->
<template>
<div style="border: 1px solid red">
<h1>这是子组件</h1>
<button @click="$emit('increase','我喜欢你')">按钮</button>
</div>
</template>

<script setup>
//下面这样写也是可以的
/*
const love=defineEmits(['increase'])
const msg="我喜欢你宝贝"
function chuanFu(){
  love("increase",msg)
}
*/
</script>

<style scoped>

</style>

<!--这是父组件-->
<template>
<div>
  <Props @increase="increaseCount" />
  <h1>str:{{str}}</h1>
</div>
</template>

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import Props from "@/components/Props.vue";

const str=ref('')

function increaseCount(n) {
  str.value = n
}

</script>

<style scoped>

</style>

        意思大概就是，当我点击一下按钮，父组件的@increase就会监听到，并且可以拿到子组件传过来的"我喜欢你"。用响应式变量str接收，就可以输出出来。

4.vue3父组件传值给子组件

<!-- 这是父组件 -->
<template>
  <Props value="我喜欢你" ></Props>
</template>

<script setup>
import Props from "@/components/Props.vue";
</script>

<style scoped>

</style>

<!--这是子组件 -->
<template>
<div style="border: 1px solid red">
{{value}}
<h1>这是子组件</h1>
</div>
</template>

<script setup>
defineProps(['value'])
//这样写也是可以的
//defineProps({value:String})
</script>

<style scoped>

</style>

        通过组合式api,父组件在Props组件上加了一个自定义属性value，给value属性赋值我喜欢你，那么子组件就可以通过组合式api中defineProps(['value'])直接就接收到了，相比vue2会更加直观明了，当然效果是一样的都可以传。