vue3 组件间通信的6种方式

vue3组件通信的6种方式(setup语法糖)

直接上例子，例子均采用setup语法

1、props

// 父组件

<template>
  <div>
    <son :msg="state.msg" />
  </div>
</template>

<script setup>
import son from './son.vue'
import { reactive } from 'vue'
const state = reactive({
  msg: '父组件的值'
})
</script>
<style scoped lang="scss"></style>

// 子组件

<template>
  <div>
    son
    {{ msg }}
  </div>
</template>

<script setup>
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="scss"></style>

3、emit

// 父组件
<template>
  <div>
    <son @myClick="handleClick" />
  </div>
</template>

<script setup>
import son from './son.vue'
const handleClick = (val) => {
  console.log(val)
}
</script>
<style scoped lang="scss"></style>

// 子组件
<template>
  <div>
    son
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup>
const emit = defineEmits(['myClick'])
const handleClick = () => {
  emit('myClick', '我是子组件的值')
}
</script>

<style scoped lang="scss"></style>

3、defineExpose

利用defineExpose+ref 可以得到组件里的方法和变量

// 父组件

<template>
  <div>
    <son ref="sonRef" />
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup>
import son from './son.vue'
import { ref } from 'vue'
const sonRef = ref(null)
const handleClick = (val) => {
  console.log(sonRef.value.msg)
}
</script>
<style scoped lang="scss"></style>

// 子组件

<template>
  <div>
    son
  </div>
</template>

<script setup>
defineExpose({
  msg: '我是子组件'
})
</script>

<style scoped lang="scss"></style>

4、provide inject

// 父组件

<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from './son.vue'
import { provide } from 'vue'
provide('msg', '我是父组件')
</script>
<style scoped lang="scss"></style>

// 子组件

<template>
  <div>
    son
    {{ data }}
  </div>
</template>

<script setup>
import { inject } from 'vue'
const data = inject('msg')
</script>

<style scoped lang="scss"></style>

5、attrs

attrs可以接受除去 props、style、 class之外的属性

// 父组件

<template>
  <div>
    <son :msg="state.msg" :hello="state.hello" />
  </div>
</template>

<script setup>
import son from './son.vue'
import { reactive } from 'vue'
const state = reactive({
  msg: '我是父组件',
  hello: 'hello'
})
</script>
<style scoped lang="scss"></style>

// 子组件

<template>
  <div>
    son
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.msg)  // 我是父组件
</script>

<style scoped lang="scss"></style>

6、v-model

// 父组件

<template>
  <div>
    <son v-model:msg="state.msg" />
    {{ state.msg }}
  </div>
</template>

<script setup>
import son from './son.vue'
import { reactive } from 'vue'
const state = reactive({
  msg: '我是父组件'
})
</script>
<style scoped lang="scss"></style>

// 子组件

<template>
  <div>
    son
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
console.log(props.msg)

const emit = defineEmits(['msg'])
const handleClick = () => {
  emit('update:msg', '我是子组件')
}
</script>

<style scoped lang="scss"></style>

感谢观看，有错误感谢指出！