彪码 Vue3父子传值 、兄弟传值

父子传值

在我们的项目当中 ， 会出现我们页面里面嵌套一些组件的情况,但是我们想要让组件内部的数据成为动态的 , 这个时候 我们就要用到我们的父子传值,

Vue3  父向子传值

首先我们定义了一个组件，在父组件里面进行引用

子组件：

这个时候我们页面效果是：

 这个时候值就成功的传到了子组件里,

属性

props	它是响应式的，里面包含了父组件传递过来的信息,
context	普通的JavaScript对象，暴露了在setup里面可能有用的一些方法
computed	计算属性，监听值发生改变了进行同步，没有改变走缓存

子向父传值

子组件

这里是给我们的按钮添加了一个点击事件，在点击的时候触发setParentStr方法，在setup里面定义了方法 , 一定要在 return 抛出， ctx.emit("传递名称",传过去的值)

父组件

我们在接收值得时候 利用 @子组件传递的名称="触发的方法名称"，这样在我们的方法里就能进行操作我们传递的值

效果图

 兄弟传值 

由于子组件 的值是父组件传递过去的 ， 所以 这个兄弟组件 操作了父组件的值，那么子组件也跟着变化  代码如下

父组件 引入 兄弟组件

ChildBrother 兄弟组件

效果图

 那怎么把兄弟组件的值直接传给子组件呢

这个时候我们需要下载一个插件

npm install --save vue3-eventbus

安装完毕 在main.js里面进行挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import eventBus from 'vue3-eventbus'//引入vue3-eventbus

createApp(App).use(eventBus).use(store).use(router).mount('#app')

Child 子组件

兄弟组件 ChildBrother

在这两个文件里面 分别引入 vue3-eventbus 这个插件 

传递：bus.emit('传递名称',传递的值)

接收：  bus.on('传递名称',(传递的值)=>{

要进行的操作

})

效果图下方

 战士的意志要像礁石一样坚定 战士的性格要像和风一样温柔