elementui tab组件给子组件传值时会多次传重复的值 vue组件传多个值

一、父组件向子组件传值

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

1.在父组件的子组件标签中绑定自定义属性

// 父组件
<user-detail :myName="name" />
    
export default {
    components: {
        UserDetail
    }
    ......
}

2.在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。

// 子组件
export default {
    props: ['myName']
}

/*
props: { myName: String } //这样指定传入的类型，如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: { 
    childMsg: { 
        type: Array, 
        default: () => [] 
    }
}  // default指定默认值
如果 props 验证失败，会在控制台发出一个警告。
*/

子组件接收的父组件的值分为引用类型和普通类型两种：

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

引用类型：数组（Array）、对象（Object）

二、子组件向父组件传值

1.子组件绑定一个事件，通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

// 子组件
<button @click="changeParentName">改变父组件的name</button>

export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

在父组件中定义并绑定 handleChange 事件

// 父组件
<child @handleChange="changeName"></child>

methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

2.通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

// 父组件
<child :callback="callback"></child>

methods: {
    callback: function(name) {
        this.name = name
    }
}

在子组件中接收，并执行 callback 函数

// 子组件
<button @click="callback('Jack')">改变父组件的name</button>

props: {
    callback: Function,
}

4.通过 $parent / $children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}



// 父组件
<template>
  <child ref="childRef" />
</template>

<script>
  export default {
    created () {
      // 通过 $ref 来访问子组件
      console.log(this.$refs.childRef.title);  // 子组件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通过 $children 来调用子组件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>

5.vue中的$attrs和$listeners

详细点这里

三、兄弟组件之间传值

1.通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 触发事件并传值
        }
    }
}
</script>
// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return 'John' //没有传值的默认值
        }
    }
}
</script>

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

2.通过一个空 vue 实例

创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'
export default new Vue()
在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数

(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

<template>
    <div>
        <p>姓名: {{ name }}</p>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<script>
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
</script>

在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {//绑定事件
             this.name = name
         })
    }
}

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

3.使用 vuex

常用，点这里

四、多层父子组件通信

1. provide/inject

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：
export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。