Vue SPA中如何仅在指定路由页面引入带Props的组件

第一步：修正Counters.vue的组件导入与注册 #

网站崩溃大概率是因为导入路径错误或未正确注册组件。根据你的项目结构，主页面在根目录，若Counters.vue和主页面同级，导入路径应为./components/Counter.vue；若Counters.vue在pages子文件夹，路径则是../components/Counter.vue。修改后的Counters.vue代码如下：

<script>
// 根据实际目录结构调整路径
import Counter from "../components/Counter.vue";

export default {
  components: {
    Counter // 注册Counter组件
  },
};
</script>

<template>
  <div class="page">
    <h1>Let's count!</h1>
    <Counter :startValue="0" :incValue="1"></Counter>
    <Counter :startValue="45" :incValue="5"></Counter>
    <Counter :startValue="33" :incValue="10"></Counter>
  </div>
</template>

<style scoped>
.page {
  background-color: rgb(251, 255, 0);
  text-align: center;
}
button {
  font-size: 20px;
  padding: 1px;
  margin: 10px;
}
</style>

第二步：修复Counter组件的逻辑缺陷 #

当前Counter组件的increment方法仅修改了局部变量，既无法更新页面显示，还违反了Vueprops只读的规则。需将props值初始化到组件内部的data中，点击时更新data状态：

<script>
export default {
  props: {
    startValue: {
      type: Number,
      required: true
    },
    incValue: {
      type: Number,
      required: true
    },
  },
  data() {
    return {
      currentValue: this.startValue // 用props初始化内部可修改状态
    }
  },
  methods: {
    increment() {
      this.currentValue += this.incValue; // 更新内部状态，触发页面重新渲染
      console.log(this.currentValue);
    },
  },
};
</script>

<template>
  <button @click="increment">
    {{ currentValue }}
  </button>
</template>

<style scoped>
button {
  font-size: 20px;
}
</style>

关键注意点 #

1. 路径正确性：路径错误会直接导致组件加载失败，务必根据实际目录结构调整导入路径。
2. props使用规则：Vue props是单向数据流，不能直接修改，必须通过内部data属性维护可变更状态。
3. 组件注册：必须在Counters.vue的components选项中注册导入的Counter组件，否则模板无法识别<Counter>标签。

内容的提问来源于stack exchange，提问作者user9735994