Vue中的父传子,和子传父,兄弟传值

在我们平常的开发中,组件的传值是必不可少的。

一.父传子

APP.vue

<template>
  <div class="">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

HelloWorld.vue

<template>
  <div class="">456</div>
</template>

<script>
export default {
  name: "",
  methods: {},
};
</script>

<style scoped></style>

view视图

需求:

父组件传入一个数组给子组件,然后子组件循环遍历这个数组。

父组件在data里面的数据

<template>
  <div class="">
    <HelloWorld :aa="arr" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  data() {
    return {
      arr: [{ name: "小红" }, { name: "小华" }],
    };
  },
  components: {
    HelloWorld,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

传递的方式:

在子组件上自定义一个属性传递过去

 <HelloWorld :aa="arr" />

子组件接收:

<template>
  <div>
    <div v-for="(item, index) in aa" :key="index">{
   
   { item.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    aa: {
      require: true,
      default: 10,
    },
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

view视图:

 证明已经传值成功,至于为什么不能修改,怎么修改,可见单向数据流篇章。

二.子向父

父组件：

<template>
  <div class="">
    <HelloWorld :aa="arr" @closeEvent="show" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  data() {
    return {
      arr: [{ name: "小红" }, { name: "小华" }],
    };
  },
  components: {
    HelloWorld,
  },
  name: "",
  methods: {
    show(val) {
      alert(val);
    },
  },
};
</script>

<style scoped></style>

子组件：

<template>
  <div>
    <div v-for="(item, index) in aa" :key="index">{
   
   { item.name }}</div>
    <button @click="fn">像父组件传递数据</button>
  </div>
</template>

<script>
export default {
  props: {
    aa: {
      require: true,
      default: 10,
    },
  },
  name: "",
  methods: {
    fn() {
      this.$emit("closeEvent", 10);
    },
  },
};
</script>

<style scoped></style>

解析:在子组件里面通过this.$emit('自定义事件的名字',要传递的值)

        在父组件上通过 @自定义事件的名字='一个函数'。 来实现子向父传递值。

       这里的this指向:vue的实例。

三.兄弟传值

原来:通过事件总线来解决问题。

在main.js挂在

const bus = new Vue();
Vue.prototype.$bus = bus;

在app.vue引入两个组件并且注册

<template>
  <div class="">
    <One />
    <Two />
  </div>
</template>

<script>
import One from "./components/One.vue";
import Two from "./components/Two.vue";
export default {
  components: {
    One,
    Two,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

子组件1

<template>
  <div class="">
    <button @click="fn">点击向Two组件传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 12,
    };
  },
  name: "",
  methods: {
    fn() {
      this.$bus.$emit("name", this.number);
    },
  },
};
</script>

<style scoped></style>

子组件2

<template>
  <div class=""></div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$on("name", (val) => {
      alert(val);
    });
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

view视图

说明传递成功了。

快说说你是怎么实现兄弟组件之间传值的。