首先建议大家用Vuex进行传递Vue3还是有Vuex的 可能是名称发生了变化
那么我现在大家介绍一下Vue3的defineEmits和defineProps 废话不多说直接上代码
首先我们需要一个父组件Home 然后吧两个兄弟组件A和B引入进去
我这里使用的是Vue3的setup语法糖 不需要用components进行注册
然后我们在A组件使用defineEmits参数传递给父组件
解释一下 其实就是我用ref定义了一个变量里面是一串字符 那么我们再创建一个按钮写上一个点击事件
就叫btn 接着我们在定义一个defineEmits自定义的事件名称就是fn 待会需要在父组件中用到
emit的第二个参数就是我们需要传递的参数
那么接下来我们回到父组件接收一下刚才A组件传递过来的值 这个的@fn就是我们刚才定义的事件名
那么我们给她定义一个change事件来接收刚才传递的参数 这里我又定义了一个空的str来接收我们
A组件传递过来的参数 箭头函数中的e就是A组件传递过来的参数 接下来我们把e.value赋值给str.value
为什么要.value 因为vue3中规定了ref定义的变量存储再他的value中 接下来就是像vue2中的porps传递一样
用v-bind的简写传递给B组件 如果看不懂的话 说明vue2中的props你也不太明白 就记写法吧
那么我来到B组件就需要用到我们defineProps来接收父组件传递的参数了
我这里是定义了一个porps来接收defineProps传递过来的str 其实可以省略直接写defineProps
接下来我们给传递过来的str定义类型 type 字符串类型 default 默认值随便 需要就写 不需要也可以不加default
但是我们这种方法比较繁琐 所以我们可以使用mitt来进行传递 那么我们需要在项目中npm i mitt -g
来载入我们的这个插件 安装好了之后 我们来创建一个文件夹 定义一个bus.js文件 引入我们安装好的
mitt插件 在暴露出去
import mitt from "mitt";
export default mitt;
接着我们就可以再需要的页面用了 这里我们还是以AB组件为例A组件向B组件传值
我们引入刚才我们创建的js文件 命名为emitter 在老样子 定义一个变量来传递 我们使用mitt自带的方法 emit来传递 add是我随便写的明 后面才是我们传递的参数 依旧使用我们的点击事件来传递
接着我们来到我们B组件接收与上一种方法不同的是 我们这边需要定义一个参数来接收传递过来的参数
这是使用我们的onBeforeMount来再页面初始化的时候接收我们的参数 下面我们还需要引入我们创建的mitt文件 同样命名 emitter 使用它内置的on方法 add同样是我们刚才随便写的一个名字 e就是我们传递的数据
