vue获取参数的几种方式总结

Vue获取参数的几种方式总结

在Vue开发中，获取参数是必不可少的。Vue提供了多种方法来获取参数，本文将总结几种常见的方式。

1. 通过props获取参数

当一个组件需要从父组件获取参数时，可以使用props。通过在父组件的模版中为子组件的标签属性添加键值对（即props），在子组件实例中通过this访问props对象即可获取参数。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <child-component :title="title" :content="content"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      title: '我是标题',
      content: '我是内容'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['title', 'content']
}
</script>

2. 通过this.$route获取参数

当使用Vue Router时，可以通过this.$route获取URL参数。

示例代码：

<template>
  <div>
    <h2>{{ $route.params.id }}</h2>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

上面的代码中，$route.params.id表示URL中以":"开头的参数。例如，URL为"/user/123"，则$route.params.id的值为"123"。

总结：

本文总结了Vue获取参数的两种方式：props和this.$route。使用props可以从父组件向子组件传递参数，使用this.$route可以从URL获取参数。在实际应用中，根据情况选择合适的方式来获取参数。