Vue.js 参数传递：Props、事件和路由 - 详细指南

在 Vue.js 中，组件之间的交互是至关重要的。数据传递是实现这种交互的关键，而 Vue.js 提供了多种方法来传递参数。

1. 通过 props 属性传递参数：

在父组件中定义 props 属性，然后在子组件中通过 props 接收属性值。

<!-- 父组件中定义 props 属性 -->
<template>
   <child-component :propName='propValue'></child-component>
</template>

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

<!-- 子组件中通过 props 接收属性值 -->
<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  props: {
    propName: {
      type: String,
      default: '',
    },
  },
};
</script>

2. 通过事件传递参数：

在子组件中定义一个事件，然后在父组件中通过 $emit 方法触发事件，并传递参数。

<!-- 子组件中定义一个事件 -->
<template>
  <button @click='handleClick'>Click Me</button>
</template>

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

<!-- 父组件中通过 $emit 方法触发事件，并传递参数 -->
<template>
  <child-component @event-name='handleEvent'></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(value) {
      console.log(value); // 输出：Hello World
    },
  },
};
</script>

3. 通过 $route 对象传递参数：

在路由配置中定义动态路由，然后在组件中通过 $route 对象获取参数值。

// 路由配置中定义动态路由
const router = new Router({
  routes: [
    {
      path: '/user/:id',
      component: UserComponent,
    },
  ],
});

// 在组件中通过 $route 对象获取参数值
<template>
  <div>User id: {{ $route.params.id }}</div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.params.id); // 输出：动态参数值
  },
};
</script>

通过这三种方法，您可以在 Vue.js 组件之间轻松传递参数，实现复杂的数据交互和功能。