丁鹿学堂：vue3的七种通信方式总结（上篇）

vue3的组件通信总结（7种方法，灵活使用）

1 props

props是最简单的父传子的组件通信方法，子组件接收父组件的数据，一般只做渲染，使用也比较简单。

  <son :faData="faData"></son>
  // 子组件：
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  faData: {
    type: Number,
    default:0
  },
})
</script>

2emit，emit常用于子组件传参数给父组件

引入defineEmits组合式api触发，父组件监听，子组件触发，通过参数传递数据 子组件触发

<script setup>
import {ref,defineEmits } from 'vue'
const number = ref(12)
const emits = defineEmits(['sendFa'])
let sendData = ()=>{
  emits('sendFa',number.value)
}

</script>

父组件监听

 <div>
    子组件修改的参数：{{data2}}
    <son :faData="faData" @sendFa = "onSonHanalde"></son>
 </div>
const data2 = ref(0)
let onSonHanalde = (data)=>{
  data2.value = data
}

3 v-model 子组件给父组件传值

这个v-model其实是个语法糖。就是当子组件emit触发的事件名固定写死为update的时候，可以使用v-model去监听。

 // 子组件
<script setup>
import {ref,defineEmits } from 'vue'
const number = ref(12)
const emits = defineEmits(['sendFa'])
let sendData = ()=>{
  emits('update:sendNumber',number.value)
}

</script>

父组件中通过v-model:sendNumber ="data2" 完成事件监听,把子组件的参数赋值给了data2，就不用再去专门定义一个事件去赋值了。

 <div>
    子组件修改的参数：{{data2}}
    <son :faData="faData" v-model:sendNumber="data2"></son>
 </div>