组件通信

Fri, 04 Oct 2024 00:00:00 +0800

Vue3 组件通信方式

props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
mitt

Vue3 通信使用写法

1. props

用 props 传数据给子组件有两种方法，如下

方法一，setup() 方法写法

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue"
import { ref, reactive } from "vue"
export default {
 data(){
 return {
 msg1:"这是传级子组件的信息1"
 }
 },
 setup(){
 // 创建一个响应式数据

 // 写法一 适用于基础类型 ref 还有其他用处，下面章节有介绍
 const msg2 = ref("这是传级子组件的信息2")

 // 写法二 适用于复杂类型，如数组、对象
 const msg2 = reactive(["这是传级子组件的信息2"])

 return {
 msg2
 }
 }
}
</script>

// Child.vue 接收
<script>
export default {
 props: ["msg1", "msg2"],// 如果这行不写，下面就接收不到
 setup(props) {
 console.log(props) // { msg1:"这是传给子组件的信息1", msg2:"这是传给子组件的信息2" }
 },
}
</script>

方法二，setup 语法糖

组件通信 on Last Stand

组件通信

Vue3 组件通信方式

Vue3 通信使用写法

1. props