NuxtJS父组件向子组件传值无渲染问题咨询（附代码示例）

嘿，我一眼就看到问题出在哪了——你父组件传递静态字符串的方式用错了！

问题原因 #

当你给组件属性加上:someData（这是v-bind的语法糖）时，Vue会把引号里的内容当成JavaScript表达式去解析。你写的"Some String"没有用单引号包裹，Vue会以为这是一个变量名，但你的父组件里根本没定义Some String这个变量，所以实际传递给子组件的是undefined，子组件自然渲染不出任何内容。

解决方法 #

分两种场景来处理：

1. 传递静态固定字符串

如果只是要传一个固定的字符串，有两种写法：

• 推荐写法：直接去掉冒号，把字符串当作普通HTML属性值传递

<template>
  <div>
    <ChildComponent someData="Some String" />
  </div>
</template>

• 如果你一定要用v-bind（比如后续可能改成动态值），记得给字符串套上单引号，让Vue识别这是一个字符串字面量：

<template>
  <div>
    <ChildComponent :someData="'Some String'" />
  </div>
</template>

2. 传递动态数据（比如父组件的响应式变量）

要是你想传父组件里的动态内容，那需要先在父组件的data里定义变量，再用v-bind绑定：

<template>
  <div>
    <ChildComponent :someData="dynamicContent" />
  </div>
</template>

<script>
import ChildComponent from "~/components/childComponent.vue";

export default {
  components: { ChildComponent },
  data() {
    return {
      dynamicContent: "我是父组件的动态数据"
    };
  }
};
</script>

你的子组件代码是完全没问题的，props定义正确，只要父组件传对值，子组件的{{someData}}就能正常渲染啦。

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