vue组件之间的数据传递(通信)

vue.png

种类

1. 父组件跟子组件通信
2. 子组件跟父组件通信
3. 兄弟组件之间的通信

父组件如何将数据传到子组件中

可以通过prop将数据传递给子组件

需要注意的是

1. prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
2. 每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

代码

father.vue

<template>
  // v-bind来绑定动态数据，静态数据可以不用v-bind指令(:是v-bind的简写)
  <child-component :message='message'></child-component>
</template>

<script>
import child from 'child.vue';
export default {
  name: "father",
  data() {
    return {
      message: 'hello'
    }
  },
  components: {
    'child-component': child
  }
}
</script>

child.vue

<template>
  <div class='child'>{{ message }}</div>
</template>

<script>
export default {
  name: "child",
  props: ['message']
}
</script>

prop验证

<script>
export default {
  name: "child",
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
}
</script>

子组件如何将数据传到父组件中

可通过emit将数据传递给父组件，父组件监听事件的触发($on)，子组件手动触发事件($emit)。

代码

father.vue

<template>
  // 父组件监听listenChild事件，执行getChildData方法，并且拿到传递过来的数据(@是v-on的简写)
  <child-component @listenChild='getChildData'></child-component>
</template>

<script>
import child from 'child.vue';
export default {
  name: "father",
  methods: {
    getChildData (val) {
      console.log(`子组件传递过来的数据: ${val}`); // hello
    }
  },
  components: {
    'child-component': child
  }
}
</script>

child.vue

<template>
  <div class='child'></div>
</template>

<script>
export default {
  name: "child",
  created () {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      this.$emit('listenToChild', 'hello');
    }
  }
}
</script>

兄弟组件之间如何传递数据

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发$emit和监听$on来实现组件之间的通信和参数传递。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

代码

bus.js

import Vue from 'vue';
export default new Vue;

a.vue

<template>
  <div class='a'></div>
</template>

<script>
import Bus from 'bus.js' ;
export default {
  name: "a",
  created() {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      Bus.$emit('listenToA', 'hello');
    }
  }
}
</script>

b.vue

<template>
  <div class='b'></div>
</template>

<script>
import Bus from 'bus.js';
export default {
  name: "b",
  monted() {
    Bus.$on('listenToA', this.getAData);
  },
  methods: {
    getAData (val) {
      console.log(`a组件传递过来的数据: ${val}`); // hello
    }
  }
}
</script>

如果您喜欢这篇文章，那么记得动动你们的👋，给个like或者关注我哦👍。