项目中vue3 组合式API下的父子通信

1.父传子

步骤：

        1.父组件中给子组件绑定属性

        2.子组件通过 defineProps 接收值

代码截图：这个是将传来的值直接渲染到模板

还有一种情况就是在 js 中使用传来的值，需要有一个变量接收defineProps的值：

控制台：

以上都是传的是静态数据，不会变。

如果是响应是的数据：

我们需要加一个冒号

我们需要注意的是传递和接受的属性名要一致：

父组件传的属性名是 count 和 message

子组件接收的属性名就要 count 和 message

const props = defineProps({属性名 : 类型})

代码片段两个文件：

<template>
  <div>
    <h1>我是父组件</h1>
    <sonCom :count="num" message="父组件传的消息"/>
  </div>
  
</template>

<script setup>
// 导入子组件后直接使用即可
import {ref} from 'vue';
import sonCom from './son-com.vue';
const num = ref(123)
setTimeout(()=>{
  num.value = 1
},4000)
</script>

<style lang="scss" >

</style>


<template>
  <h1>
    我是子组件
  </h1>
  <div>{{ message }} 数字 {{ count }}</div>

</template>

<script setup>
const props = defineProps({
  message:String,
  count:Number
})

console.log(props.message);
</script>

<style lang="scss" >

</style>

2.子传父

步骤：

        1.父组件中给子组件标签通过 @ 绑定事件

        2.此组件内部通过 $emit 方法触发事件

父组件：

@get-message="getMessage"：是一个事件监听，当子组件触发 get-message 事件时，会调用父组件中的 getMessage 方法。 getMessage 方法在父组件的 <script setup> 部分中定义，它会接收一个参数 msg ，并将其打印到控制台。

子组件：

defineEmits 是一个用于定义组件可以触发的事件的函数。defineEmits 函数接受一个数组作为参数，该数组包含了组件可以触发的所有事件的名称。

点击按钮触发事件，在父组件中被打印

以上就是父子组件通信的方法啦我，大家快去练习吧！！！