持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
最近在研究vue3.2的时候，碰到了不少有趣的玩法，今天将知识点分享出来
父子传参
父传子
父传子我们需要用到 defineProps，这个怎么用呢？
首先声明父组件，这里跟vue2相差不大
// <Children :sonDataName = 'fatherDataName' />
<Store :store_list='item.data' /> //这里的数据过多，不方便透露了
这里说明一下第一个就是在子组件接收的数据的时候用到名字，第二个就是在父组件的数据名称
然后我们看一下子组件
<script setup>
import { defineProps } from 'vue' //在vue中解构出这个API
const props = defineProps({ //这里的props可以随便起个名字，就是用于接收的
store_list: Array //需要声明传过来的是什么数据
})
function handle () {
console.log(props) //这里就可以打印数据了
}
</script>
然后上面我们在接收的时候还可以扩写
const props = defineProps({
store_list: {
type:Array,
default:()=>[...默认值] //整写
}
})
这里扩写还可以默认定义数据，就是当没有数据的时候，可以先用默认的渲染
然后我们去浏览器看一下
这里我们就打印出数据了，但是他是一个响应式的数据，所以我们还不能用，我相信很多人都跟我一样直接键值对这样取数据吧，但是，他是取不到的，，会显示undefined，毕竟控制台打印出来的是Proxy 对象，Proxy对象里边的[[Target]]才是真实的对象
这个时候，我想到了两个办法
方法一
通过vue中的响应式对象可使用toRaw()方法获取原始对象
用法：
//上面我们父子传参的时候子组件用了props接收
import { toRaw } from 'vue'
console.log(toRaw(props).item.pic)
console.log(props)
我们去看一下浏览器
这样我们就顺利拿到了数据
方法二
通过json序列化之后可获取值
用法：
JSON.parse(JSON.stringify(props))
我们去看浏览器对比
说了这么多，应该到说字传父了
子传父
子传父需要用到一个 defineEmits 这个API
我们先在子组件定义一下用法
<template>
<h1>子组件</h1>
<button @click="tellFather">点击告诉父组件</button>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const mymessage = ref('告诉你一个小秘密')
const emit = defineEmits(['child'])
function tellFather () {
emit('child', mymessage.value)
}
</script>
这里子组件的emit是自定义的，你喜欢写什么都可以，跟下面发送的时候保持一致即可，定义的defineEmits可以放多个信息，但是跟接收的名字保持一致即可。
下面通过一个方法发送出去，传两个参数，第一个参数就是接收的名字，第二个是发送的信息
我们在看看父组件
<template>
<h1>我的父组件</h1>
<h3>我听到了密码：{{msg}}</h3>
<MineChildVue @child='getText' />
</template>
<script setup>
import { ref } from 'vue'
import MineChildVue from './components/MineChild.vue'
const msg = ref()
function getText (val) {
msg.value = val
}
</script>
父组件写法与vue2并无多少变化
我们来看浏览器
这样我们就完成了子传父的写法了，是不是想比于vue2写法方便很多
