uniapp如何组件传值

在uniapp中，组件传值有多种方式，以下是其中几种常用的方式：

props

组件可以通过props属性接收父组件传递过来的数据，父组件可以通过v-bind指令将数据传递给子组件。在子组件中，可以通过this.$props访问到传递过来的props。

父组件：

<template>
  <child :msg="hello"></child>
</template>
<script>
  export default {
    data() {
      return {
        hello: 'Hello World!'
      }
    }
  }
</script>

子组件：

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default {
    props: {
      msg: {
        type: String,
        default: ''
      }
    }
  }
</script>

$emit

组件可以通过$emit方法向父组件发送事件并传递数据，父组件可以通过v-on指令监听该事件并获取子组件传递过来的数据。

子组件：

<template>
  <button @click="handleClick">Click me</button>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('custom-event', 'Hello World!')
      }
    }
  }
</script>

父组件：

<template>
  <child @custom-event="handleCustomEvent"></child>
</template>
<script>
  export default {
    methods: {
      handleCustomEvent(value) {
        console.log(value) // 输出 Hello World!
      }
    }
  }
</script>

provide/inject

父组件可以通过provide选项提供数据，子组件可以通过inject选项注入数据。这种方式适合于多级嵌套的组件之间传递数据。

父组件：

<template>
  <child></child>
</template>
<script>
  export default {
    provide: {
      msg: 'Hello World!'
    }
  }
</script>

子组件：

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default {
    inject: ['msg']
  }
</script>