Vue 中页面传值的多种方式小结

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/source/:id',
      component: SourceComponent,
    },
    // 其他路由配置...
  ],
});
// 源页面
<template>
  <router-link :to="{ path: '/source/1' }">跳转到目标页面</router-link>
</template>
// 目标页面
<template>
  <div>
    <p>参数传递的值：{{ $route.params.id }}</p>
  </div>
</template>

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/source',
      component: SourceComponent,
      meta: {
        data: {
          id: 1,
          name: 'John',
        },
      },
    },
    // 其他路由配置...
  ],
});
// 目标页面
<template>
  <div>
    <p>参数传递的值：{{ $route.meta.data.id }}</p>
  </div>
</template>

// Vuex 配置
const store = new Vuex.Store({
  state: {
    value: '',
  },
  mutations: {
    setValue(state, value) {
      state.value = value;
    },
  },
});
// 源页面
<template>
  <div>
    <input v-model="value" />
    <button @click="setValue">传递参数</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    setValue() {
      this.$store.commit('setValue', this.value);
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <p>参数传递的值：{{ value }}</p>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
};
</script>
// 父组件
<template>
  <div>
    <child-component :value="data"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      data: '传递的值',
    };
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="handleClick">传递参数</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('event-name', '传递的值');
    },
  },
};
</script>
// 父组件
<template>
  <div>
    <child-component @event-name="handleEvent"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(value) {
      console.log(value); // 输出：传递的值
    },
  },
};
</script>