vue3 的8种通信 方式

目录

1.defineProps  defineEmits  defineExpose/ref

ts写法

defineEmit

defineExpose

2.v-model   组件标签可同时写多个v-model 不再支持  .sync

3.provide inject

4.attrs  会包含父组件的props 属性的集合  一旦用props接收，attrs

就接收不到了

5.插槽

---

基于vue 3.2

1.defineProps  defineEmits  defineExpose/ref

defineEmits

//father







//son

defineExpose  父组件需要借助ref

ts写法

defineProps 三种写法

 let props= defineProps(['str'])
 console.log(props);

  let props = defineProps({
    str:String,
    arr:{
        type:Object,
        default:()=>[1,2]
    }
  })

let props = defineProps<{
    str:string,
    arr:number[]
}>()


withDefaults(defineProps<{  //设置默认值
    str:string,
    arr:number[]
}>(),{
    arr:()=>[666]
})

defineEmit

let emit = defineEmits(['ca'])

let emit = defineEmits<{  // 可以对每一个参数进行限制
    (e:'ca',a:string,b:number,c:string):void
}>()

let changeArr = ()=>{
  emit('ca','999',88,'jjj')
}

defineExpose

defineExpose<{n:string,s:Function}>({
    n:'999',
    s:()=>console.log('999'),
})

let wf = ref>();
onMounted(()=>{
    wf.value?.s();
    console.log(wf.value?.n);
})

2.v-model   组件标签可同时写多个v-model 不再支持  .sync

3.provide inject

4.attrs  会包含父组件的props 属性的集合  一旦用props接收，attrs

就接收不到了

5.插槽

vue2
匿名插槽
具名	模版标签 v-slot:xxx 或 #xxx
作用域	模版  slot-scope="{name}"

vue3	匿名 具名不变
作用域	模版  v-slot="{name}" 或者  #default="{name}" 或者  v-slot:default="slotProps"

动态插槽  

 

import { ref } from 'vue';
let dyniamic = ref('dyniamic')
let dyniamicChange = ()=>{
  dyniamic.value = 'test'
}

具名插槽也可以 当作用域 用