vue组件传值的六种方法大全

前言

在 Vue.js 中，组件是构建用户界面的基本单位。组件可以复用，这使得它们非常适合构建复杂的用户界面。但是，当组件需要在彼此之间传递数据时，就需要使用组件传值。

组件传值的方法

props

props 是 Vue.js 中最常用的组件传值方法。props 是子组件从父组件接收数据的属性。子组件可以在其模板中使用 props，就像它们是普通数据一样。

使用 props 传值

<!-- 父组件 -->
<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

$emit

$emit 是子组件向父组件发送事件的方法。父组件可以在其模板中监听这些事件，并做出相应的反应。

使用 $emit 传值

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, world!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

eventbus

eventbus 是一个全局事件总线，允许组件在彼此之间传递事件。组件可以通过 on() 方法订阅事件，并通过 emit() 方法触发事件。

使用 eventbus 传值

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
import Vue from 'vue'

export default {
  created() {
    Vue.$on('message', this.handleMessage)
  },
  beforeDestroy() {
    Vue.$off('message', this.handleMessage)
  },
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
import Vue from 'vue'

export default {
  methods: {
    handleClick() {
      Vue.$emit('message', 'Hello, world!')
    }
  }
}
</script>

vuex

vuex 是一个集中式的状态管理库，允许组件共享数据。组件可以通过 getter 和 mutation 来访问和修改 vuex 的状态。

使用 vuex 传值

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
import Vuex from 'vuex'

export default {
  store: new Vuex.Store({
    state: {
      message: 'Hello, world!'
    },
    mutations: {
      setMessage(state, message) {
        state.message = message
      }
    }
  })
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
import Vuex from 'vuex'

export default {
  store: new Vuex.Store({
    state: {},
    mutations: {}
  }),
  methods: {
    handleClick() {
      this.$store.commit('setMessage', 'Hello, world!')
    }
  }
}
</script>

parent / children / ref

parent、children 和 ref 是 Vue.js 提供的几个内置属性，允许组件访问其父组件、子组件和引用元素。

使用 parent / children / ref 传值

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.child.handleMessage('Hello, world!')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$parent.sendMessage()
    },
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

sessionStorage 和 localStorage

sessionStorage 和 localStorage 是两个浏览器 API，允许组件在会话或本地存储中存储数据。组件可以通过 window.sessionStorage 和 window.localStorage 来访问这些 API。

使用 sessionStorage 和 localStorage 传值

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  created() {
    window.sessionStorage.setItem('message', 'Hello, world!')
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(window.sessionStorage.getItem('message')) // Hello, world!
    }
  }
}
</script>

总结

在本文中，我们讨论了 vue 组件传值的六种方法：props、emit、eventbus、vuex、parent / $children / ref、sessionStorage 和 localStorage。我们详细介绍了每种方法的使用方式、优缺点以及最佳实践。本文将帮助您选择最适合您需求的组件传值方法。