【精品】vue3中setup语法糖下父子组件之间的通信

准备工作

在router文件夹中创建index.ts文件：

import {createRouter, createWebHashHistory} from 'vue-router'
import Father from '../views/Father.vue'

const routes = [
    {
        path: '/',
        name: "Father",
        component: Father
    },
    {
        path: '/Son',
        name: 'Son',
        component: () => import('../views/Son.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

父传子：

• 第一步：Father.vue

  父组件
  
  



import {ref} from 'vue'
import Son from "./Son.vue";

let num = ref(6688)
let array = ref([11, 22, 33, 44])

• 第二步：Sun.vue

  子组件
  {{props.num}}--{{props.arr}}



let props = defineProps({
  num: Number,
  arr: {
    type: Array,
    default: () => [1, 2, 3, 4]
  }
})

子传父：

• 第一步：Sun.vue

  子组件
  向父组件传递数据



import {ref} from 'vue'

const emit = defineEmits(["son_sendMsg"]);
const msg = ref("子组件传递给父组件的数据")

function sendMsg() {
  emit("son_sendMsg", msg.value)
}

• 第二步：Father.vue：

  父组件
  {{ message }}
  
  



import {ref} from 'vue'
import Son from "./Son.vue"

let message = ref("")
function fun(msg) {
  message.value = msg
}