©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>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>
感谢观看，有错误感谢指出！