丁鹿学堂：vue3的组件通信汇总（7种方式上篇）

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

1 props

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

  
  // 子组件：

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

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

父组件监听

 

    子组件修改的参数：{{data2}}
    
 
const data2 = ref(0)
let onSonHanalde = (data)=>{
  data2.value = data
}

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

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

 // 子组件

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

 

    子组件修改的参数：{{data2}}