vuequery怎么传参

在Vue中传递参数有多种方式，以下是其中的几种方式：

1. 通过props传递参数：在父组件中通过v-bind指令将数据传递给子组件，子组件通过props接收数据。

// 父组件中
<template>
  <div>
    <child-component :prop-name="propValue"></child-component>
  </div>
</template>

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

// 子组件中
<template>
  <div>
    {{ propName }}
  </div>
</template>

<script>
  export default {
    props: {
      propName: String
    }
  }
</script>

2. 通过$emit触发事件传递参数：在子组件中通过$emit触发自定义事件，并将数据作为参数传递给父组件。

// 子组件中
<template>
  <div>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('custom-event', 'Hello World!')
      }
    }
  }
</script>

// 父组件中
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
  export default {
    methods: {
      handleCustomEvent(data) {
        console.log(data) // 'Hello World!'
      }
    }
  }
</script>

3. 通过$router传递参数：在路由跳转时通过$route对象传递参数，在目标路由组件中通过$route.params接收数据。

// 路由配置中
const router = new VueRouter({
  routes: [
    {
      path: '/target/:id',
      component: TargetComponent
    }
  ]
})

// 源组件中
<template>
  <div>
    <router-link :to="{ name: 'target', params: { id: '123' } }">Go to target</router-link>
  </div>
</template>

// 目标组件中
<template>
  <div>
    {{ $route.params.id }}
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$route.params.id) // '123'
    }
  }
</script>

这些方法都可以用来在Vue中传递参数，具体选择哪种方法取决于你的需求。