vue3组件通信

①props

②events

③v-model

可以直接在子组件中改变父组件的值

④style class

<ChildComp  style='color:#f40'><ChildComp/>
<!--html  element在子组件的根元素上展示>
<div  style = 'color:#f40'></div>

⑤attributes

  <ChildComp  data-a='test'   style='color:#f40'><ChildComp/>
  <!--html  element>
  <div  data-a='test'></div>
  
  import{ useAttrs } from 'vue';
  const attrs = useAttrs()
  onMounted(()=>{
      attrs---->{
                  data-a:'test',
                  style:{color:#f40}
                }
  })
  

⑥.native .sync $children已取消

⑦$parent

 //父组件使用defineExpose导出事件或者属性
 defineExpose({
     visible,
     handleClick,
     .......
 })
 子组件，比如点击事件中获取父组件$parent
 <div  @click = 'increase($parent)'><div/>
 
 function increase(proxyObj){
     proxyObj--->{
         visible:ref对象，
         handleClick:f handleClick()
     }
 }

⑧ref

 ***父组件***
 <ChildComp  ref ='childComp'><ChildComp/>
 onMounted(()=>{
     childComp--->{
         visible:ref对象,
         handleClick:f handleClick()
     }
     
 })
 **子组件**
 defineExpose({
     visible,
     handleClick
 })
 

跨域组件通信

①provide,reject

**父组件**
import {provide} from 'vue';
provide('foo','我是provide提供的数据')

后代组件
import {inject} from 'vue';
const _foo = inject('foo')
_foo---->  '我是provide提供的数据'

②eventBus

npm install mitt --save
新建mitt.js文件
import Mitt from 'mitt';
const mitt = Mitt();
export default mitt;

在A组件中,点击事件触发mitt
import Mitt from './mitt.js';
function handleClick(){
    Mitt.emit('myMitt',18)
}

在B组件中，监听mitt事件
import Mitt from './mitt.js';
Mitt.on('myMitt',e=>{
    e      //18
}) 

③Vuex