详解Vue的七种传值方式

在Vue中，数据传递是开发中不可避免的问题，而Vue又提供了多种传值方式，方便我们进行数据的双向绑定和组件之间的交互。本文将详细介绍Vue的七种传值方式，并通过示例代码让你了解它们的使用方法及各自的优缺点。

父组件向子组件传值

1. props

最常见的方式就是通过props向子组件传值。使用该方式，父组件可以将需要传递的数据作为props属性传递给子组件，子组件则可以通过在props选项中定义相关属性来接收数据。

示例：父组件向子组件传递一个字符串

<!-- 父组件 -->
<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  data() {
    return {
      message: "hello world"
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: ["msg"]
}
</script>

2. ref

通过ref属性，父组件可以获取子组件的实例，并直接访问子组件的数据和方法。

示例：父组件通过ref访问子组件中的数据

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  mounted() {
    //通过ref获取子组件实例并访问子组件中的数据
    console.log(this.$refs.child.message)
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      message: "hello world"
    }
  }
}
</script>

子组件向父组件传值

3. emit

emit是Vue3.0新引入的特性，在Vue2.0中是通过$emit来实现的。使用emit，子组件可以向父组件发送事件，并传递相应的数据。

示例：子组件通过emit发送数据给父组件

<!-- 父组件 -->
<template>
  <div>
    <child-component @sendData="handleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  methods: {
    handleData(msg) {
      console.log(msg)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="sendMsg">发送消息</button>
</template>

<script>
export default {
  name: "ChildComponent",
  methods: {
    sendMsg() {
      this.$emit("sendData", "hello world")
    }
  }
}
</script>

4. $attrs/$listeners

Vue提供了$attrs和$listeners两个特殊的属性，可以将父组件中未被props接收的属性和事件传递给子组件。

示例：子组件通过$attrs接收父组件中的属性

<!-- 父组件 -->
<template>
  <div>
    <child-component name="Tom"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
}
</script>

<!-- 子组件 -->
<template>
  <div>{{attrs.name}}</div>
  <button @click="$listeners.click">点击</button>
</template>

<script>
export default {
  name: "ChildComponent",
  inheritAttrs: false,
  mounted() {
    console.log(this.$attrs)
  }
}
</script>

兄弟组件间的传值

5. event bus

event bus可以看作是一种全局通信方式，允许不同组件之间进行通信。使用该方式，我们需要新建一个Vue实例作为事件中心，用来监听和触发事件。

示例：通过event bus实现兄弟组件间的传值

// event-bus.js
import Vue from "vue"
export default new Vue()

// sibling-component-a.vue
<template>
  <button @click="sendData">发送数据给B</button>
</template>

<script>
import eventBus from 'event-bus'

export default {
  name: "SiblingComponentA",
  methods: {
    sendData() {
      eventBus.$emit("sendData", "hello world")
    }
  }
}
</script>

// sibling-component-b.vue
<template>
  <div>{{msg}}</div>
</template>

<script>
import eventBus from 'event-bus'

export default {
  name: "SiblingComponentB",
  data() {
    return {
      msg: ""
    }
  },
  mounted() {
    eventBus.$on("sendData", data => {
      this.msg = data
    })
  }
}
</script>

6. provide/inject

provide/inject是Vue2.2新增的特性，可用于向子孙组件注入依赖。使用该方式，我们可以在父组件中通过provide方法向所有子组件注入需要的依赖，子组件可以在inject选项中定义需要注入的依赖。

示例：使用provide/inject实现兄弟组件间的传值

// parent.vue
<template>
  <sibling-component-a></sibling-component-a>
  <sibling-component-b></sibling-component-b>
</template>

<script>
export default {
  name: "Parent",
  provide() {
    return {
      name: 'Tom',
      age: 18
    }
  }
}
</script>

// sibling-component-a.vue
<template>
  <div>{{name}}</div>
</template>

<script>
export default {
  name: "SiblingComponentA",
  inject: ["name"]
}
</script>

// sibling-component-b.vue
<template>
  <div>{{age}}</div>
</template>

<script>
export default {
  name: "SiblingComponentB",
  inject: ["age"]
}
</script>

7. vuex

vuex是Vue官方提供的状态管理库，可以用于在不同组件间共享和管理状态。使用该方式，我们需要定义一个全局的store，存储应用的状态，组件可以通过dispatch方法触发action，再通过commit方法来修改store中的state。

示例：使用vuex实现兄弟组件间的传值

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg: ""
  },
  mutations: {
    setMsg(state, data) {
      state.msg = data
    }
  },
  actions: {
    sendMsg({commit}, data) {
      commit("setMsg", data)
    }
  }
})

// sibling-component-a.vue
<template>
  <button @click="sendMsg">发送数据给B</button>
</template>

<script>
import { mapActions } from "vuex"

export default {
  name: "SiblingComponentA",
  methods: {
    ...mapActions(["sendMsg"]),
    sendData() {
      this.sendMsg("hello world")
    }
  }
}
</script>

// sibling-component-b.vue
<template>
  <div>{{msg}}</div>
</template>

<script>
import { mapState } from "vuex"

export default {
  name: "SiblingComponentB",
  computed: {
    ...mapState(["msg"])
  }
}
</script>

以上就是Vue的七种传值方式的详细介绍，希望对你有所帮助。