uni-app web页面版 子组件的内容不会获取props传入的值 而是会从域名中的参数中获取

在 uni-app 中，子组件的内容不从 props 获取值，而是从 URL 参数中获取，可能是因为你在子组件中直接从 URL 中解析了参数，而没有正确使用 props。以下是一些可能的原因和解决方法：

1. 确保正确传递 props

在父组件中，确保你正确地传递了 props 给子组件。例如：

<!-- 父组件 -->
<template>
  <child-component :myProp="myData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      myData: 'Hello from parent',
    };
  },
};
</script>

在子组件中，确保你声明了 props 并使用了它：

<!-- 子组件 -->
<template>
  <div>{{ myProp }}</div>
</template>

<script>
export default {
  props: {
    myProp: {
      type: String,
      required: true,
    },
  },
};
</script>

2. 检查是否从 URL 中获取参数

如果子组件从 URL 中获取参数，可能是因为你在子组件中使用了 uni-app 的 onLoad 或 onShow 生命周期钩子来解析 URL 参数。例如：

export default {
  onLoad(options) {
    console.log(options); // 从 URL 中获取参数
    this.myData = options.myParam;
  },
  data() {
    return {
      myData: '',
    };
  },
};

如果你希望子组件从 props 中获取数据，而不是从 URL 中获取，请移除这种逻辑。

3. 检查路由传参

如果你是通过路由跳转传递参数，确保你使用的是 props 而不是 URL 参数。例如：

// 父组件跳转时传递参数
uni.navigateTo({
  url: `/pages/childPage?myParam=${this.myData}`,
});

在子组件中，你可以通过 onLoad 获取 URL 参数，但更推荐的方式是通过 props 传递：

export default {
  props: {
    myProp: {
      type: String,
      required: true,
    },
  },
};

4. 调试和排查

• 检查父组件是否正确传递了 props。
• 检查子组件是否正确声明和使用了 props。
• 确保没有在子组件中通过其他方式（如 URL 参数）覆盖 props 的值。

5. 示例完整代码

以下是一个完整的示例，展示如何正确使用 props：

<!-- 父组件 -->
<template>
  <view>
    <child-component :myProp="myData"></child-component>
  </view>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      myData: 'Hello from parent',
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <view>
    {{ myProp }}
  </view>
</template>

<script>
export default {
  props: {
    myProp: {
      type: String,
      required: true,
    },
  },
};
</script>