组件传参之间千变万化，你选对了嘛？

在Vue中，组件之间传递参数是一个常见且重要的操作，本文将为您详细介绍多种常用的组件传参方式，帮助您在实际开发中灵活运用，做出更优选择。

1. props

props是Vue中最为常用的组件传参方式，它允许父组件向子组件传递数据。父组件通过在子组件的props属性中定义需要传递的数据，子组件则通过在模板中使用这些props来访问这些数据。

例如，父组件可以这样使用props：

<template>
  <child-component :message="message"></child-component>
</template>

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

子组件则可以这样使用props：

<template>
  <p>{{ message }}</p>
</template>

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

2. $attrs

$attrs属性允许父组件将所有未被props接收的属性传递给子组件。这对于在子组件中使用父组件设置的动态属性非常有用。

例如，父组件可以这样使用$attrs：

<template>
  <child-component :message="message" :color="color"></child-component>
</template>

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

子组件则可以这样使用$attrs：

<template>
  <p>{{ message }}</p>
  <p :style="{ color: color }"></p>
</template>

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

3. $emit

$emit方法允许子组件向父组件发送事件。父组件可以通过在子组件上监听这些事件来做出相应的响应。

例如，子组件可以这样使用$emit：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

父组件则可以这样监听子组件的事件：

<template>
  <child-component @click="handleClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Child component clicked!')
    }
  }
}
</script>

4. ref

ref属性允许父组件获取子组件的实例。这对于在父组件中操作子组件非常有用。

例如，父组件可以这样使用ref：

<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child)
  }
}
</script>

父组件可以通过this.$refs.child来访问子组件的实例。

5. $children

$children属性允许父组件获取其所有子组件的实例数组。这对于在父组件中操作所有子组件非常有用。

例如，父组件可以这样使用$children：

<template>
  <div>
    <child-component></child-component>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$children)
  }
}
</script>

父组件可以通过this.$children来访问所有子组件的实例数组。

6. slot

slot允许父组件向子组件传递HTML内容。子组件可以通过在模板中使用slot来插入这些HTML内容。

例如，父组件可以这样使用slot：

<template>
  <child-component>
    <template #header>
      <h1>This is the header</h1>
    </template>
    <template #content>
      <p>This is the content</p>
    </template>
  </child-component>
</template>

子组件则可以这样使用slot：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

7. provide/inject

provide/inject允许父组件向其所有子组件提供数据。子组件可以通过inject方法来访问这些数据。

例如，父组件可以这样使用provide：

<template>
  <child-component></child-component>
</template>

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

子组件则可以这样使用inject：

<template>
  <p>{{ message }}</p>
</template>

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

8. 事件总线

事件总线是一个全局对象，它允许组件之间通信。组件可以通过向事件总线发送事件或监听事件总线上的事件来实现通信。

例如，组件A可以这样发送事件：

this.$bus.$emit('event-name', data)

组件B可以这样监听事件：

this.$bus.$on('event-name', data => {
  // Do something with the data
})

9. querystring

querystring允许组件之间通过URL查询字符串传递数据。这对于在组件之间传递少量数据非常有用。

例如，组件A可以这样使用querystring：

this.$router.push({ query: { message: 'Hello, world!' } })

组件B可以这样使用querystring：

const message = this.$route.query.message

10. Vuex

Vuex是一个状态管理库，它允许组件之间共享状态。组件可以通过在Vuex中定义状态、getters、mutations和actions来实现共享状态。

例如，组件A可以这样使用Vuex：

this.$store.dispatch('actionName', data)

组件B可以这样使用Vuex：

this.$store.getters.getterName

11. router

router允许组件之间通过路由参数传递数据。这对于在组件之间传递少量数据非常有用。

例如，组件A可以这样使用router：

this.$router.push({ params: { message: 'Hello, world!' } })

组件B可以这样使用router：

const message = this.$route.params.message

以上列出的这些组件传参方式各有其优缺点，在实际开发中，应根据具体情况选择最合适的传参方式。