Author: 一英尺卷烟 Homepage:https://www.xielikang.com
vue.png
种类
父组件跟子组件通信
子组件跟父组件通信
兄弟组件之间的通信
父组件如何将数据传到子组件中
可以通过 prop 将数据传递给子组件
需要注意的是
prop 是单向绑定的: 当父组件的属性变化时, 将传导给子组件, 但是反过来不会这是为了防止子组件无意间修改了父组件的状态, 来避免应用的数据流变得难以理解
每次父组件更新时, 子组件的所有 prop 都会更新为最新值这意味着你不应该在子组件内部改变 prop 如果你这么做了, Vue 会在控制台给出警告
代码
- father.vue
- <template>
- // 用:(v-bind) 来绑定动态数据, 静态数据可以不用 v-bine 指令
- <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>
- // @是 v-on 指令的简写, 父组件监听 listenChild 事件, 执行 getChildData 方法, 并且拿到传递过来的数据
- <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>
来源: http://www.jianshu.com/p/10597e6e3099