欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue3 组件间通信的6种方式

程序员文章站 2022-05-15 18:38:48
...

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>

感谢观看,有错误感谢指出!