vue 优雅的跨组件传递参数~

在 Vue 中，可以通过 props、事件、vuex 等方式来实现跨组件传递参数，以下是其中一些优雅的方式：

1. Props

使用 props 可以将数据从父组件传递给子组件，实现组件之间的数据传递。

<template>
  <child-component :msg="parentMsg"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        parentMsg: 'Hello World'
      }
    }
  }
</script>

<child-component>
  <template>
    <div>{{ msg }}</div>
  </template>

  <script>
    export default {
      props: {
        msg: String
      }
    }
  </script>
</child-component>

1. 事件

使用事件可以在组件中触发事件来传递数据给父组件或者兄弟组件。

<template>
  <button @click="handleClick">向父组件传递参数</button>
  <child-component @passData="handlePassData"></child-component>
  <sibling-component :msg="siblingMsg" @passData="handlePassData"></sibling-component>
</template>

<script>
  export default {
    data() {
      return {
        siblingMsg: ''
      }
    },
    methods: {
      handleClick() {
        this.$emit('passData', 'Hello World')
      },
      handlePassData(data) {
        console.log(data)
        this.siblingMsg = data
      }
    }
  }
</script>

<child-component>
  <template>
    <button @click="handleClick">向父组件传递参数</button>
  </template>

  <script>
    export default {
      methods: {
        handleClick() {
          this.$emit('passData', 'Hello Vue')
        }
      }
    }
  </script>
</child-component>

<sibling-component>
  <template>
    <div>{{ msg }}</div>
  </template>

  <script>
    export default {
      props: {
        msg: String
      },
      methods: {
        handleClick() {
          this.$emit('passData', 'Hello React')
        }
      }
    }
  </script>
</sibling-component>

1. Vuex

在 Vuex 状态管理库中，可以将数据存储在全局的状态中，实现组件之间的共享数据。

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">更新数据</button>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    computed: {
      ...mapState(['message'])
    },
    methods: {
      ...mapMutations(['UPDATE_MESSAGE']),
      updateMessage() {
        this.UPDATE_MESSAGE('Hello Vuex')
      }
    }
  }
</script>

在全局状态 store 中定义 message 和 UPDATE_MESSAGE 两个属性和方法，然后在组件中通过 mapState 和 mapMutations 将它们映射到组件的 computed 和 methods 中，就可以实现跨组件传递参数了。

以上是 Vue 中一些常见而优雅的跨组件传递参数的方式。不同的场景选择不同的方式，有助于提高代码的可读性和可维护性。