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

父子传值

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

Vue3  父向子传值

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

<template>
  <div>
    父组件：{{parentStr}}
    <Child :msg="parentStr"></Child>
  </div>
</template>
<script>
import Child from "../components/Child.vue";
import { ref } from "vue";
export default {
  components: { Child },
  data() {
    const parentStr = ref("父组件的值");

    return {
      parentStr,
    };
  },
};
</script>

子组件：

<template>
  <div>
    子组件：{{msg}}
    <button>点击</button>
  </div>
</template>
<script>
import { computed, ref } from "vue";
export default {
  components: {},
  props: { msg: String },
  setup(props, ctx) {
    const msg = computed(() => {
      return props.msg;
    });
    return {
      msg,
    };
  },
};
</script>

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

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

属性

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

子向父传值

子组件

<template>
  <div>
    子组件：{{msg}}
    <button @click="setParentStr">点击</button>
  </div>
</template>
<script>
import { computed, onMounted, ref } from "vue"
export default {
  components: {},
  props: { msg: String },
  setup(props, ctx) {
      //子向父传值的方法
    const setParentStr = () => {
      ctx.emit("parentStr", "点击成功");
    };

    const msg = computed(() => {
      return props.msg;
    });

   
    return {
      msg,setParentStr
    };
  },
};
</script>

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

父组件

<template>
  <div>
    父组件：{{parentStr}}
    <Child :msg="parentStr" @parentStr="appectStr"></Child>
  </div>
</template>
<script>
import Child from "../components/Child.vue";
import { ref } from "vue";
export default {
  components: { Child },
  data() {
    const parentStr = ref("父组件的值");
    const appectStr=(val)=>{
parentStr.value=val
    }
    return {
      parentStr,appectStr
    };
  },
};
</script>

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

效果图

 兄弟传值 

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

父组件 引入 兄弟组件

<template>
  <div>
    父组件：{{parentStr}}
    <Child :msg="parentStr" @parentStr="appectStr"></Child>
    <ChildBrother @setChildStr="setChildStr"></ChildBrother>
  </div>
</template>
<script>
import Child from "../components/Child.vue";
import { ref } from "vue";
import ChildBrother from '../components/childBrother'
export default {
  components: { Child,ChildBrother },
  data() {
    const parentStr = ref("父组件的值");
    const appectStr=(val)=>{
parentStr.value=val
    }
    const setChildStr=(val)=>{
parentStr.value=val
    }
    return {
      parentStr,appectStr,setChildStr
    };
  },
};
</script>

ChildBrother 兄弟组件

<template>
  <div>兄弟组件:{{Str}}
<button @click="setBrotherStr">点点</button>

  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: {},
  setup(props,ctx) {
    const Str = ref("我是兄弟组件");
    const setBrotherStr=()=>{
      ctx.emit('setChildStr','我是兄弟组件传过来的值')
    }
    return {
      Str,setBrotherStr
    }
  }
}
</script>

效果图

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

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

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 子组件

<template>
  <div>
    子组件：{{ChildStr}}
    <button @click="setParentStr">点击</button>
  </div>
</template>
<script>
import {  ref } from "vue"
import bus from 'vue3-eventbus'
export default {
  components: {},
  props: {  },
  setup(props, ctx) {
    const ChildStr = ref('Child的值')
    bus.on('setChildStr',(val)=>{
      ChildStr.value=val
    })
    return {
      ChildStr
    };
  },
};
</script>

兄弟组件 ChildBrother

<template>
  <div>兄弟组件:{{Str}}
<button @click="setChildStr">点点</button>
  </div>
</template>

<script>
import { ref } from "vue";
import bus from 'vue3-eventbus'
export default {
  props: {},
  setup(props,ctx) {
    const Str = ref("我是兄弟组件")
    const setChildStr=()=>{
      bus.emit('setChildStr','我是兄弟组件传过来的值')
    }
    return {
      Str,setChildStr
    }
  }
}
</script>

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

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

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

要进行的操作

})

效果图下方

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