Vue自定义link-item组件传入的link.title值无法正常渲染显示问题

• 你在link-item.vue中没有声明link为组件的props，Vue会将未被声明为props的传入属性自动挂载到子组件的根DOM节点上，你渲染结果里根div上的link="[object Object]"就是这个逻辑导致的。
• 当前你组件内使用的link是定义在data中的局部变量，初始值就是{title: "", url: ""}，和父组件传入的参数完全无关，所以渲染出来的link.title是空值。

1. 给link-item.vue添加props声明，接收父组件传入的link参数
2. 删除data中重复定义的局部link变量，避免局部变量覆盖props传入的值

修改后的link-item.vue的script部分参考代码如下：

<script lang="ts">
export default defineComponent({
  name: "link-item",
  // 新增props声明
  props: {
    link: {
      type: Object,
      required: true,
      default: () => ({
        title: "",
        url: ""
      })
    }
  },
  data() {
    return {
      // 原有其他局部变量保留，删除此处的link定义即可
    };
  },
  // 剩余原有逻辑保持不变
  ...
})
</script>

如果你后续需要在子组件内修改link的属性值，遵循Vue单向数据流规则，不要直接修改props，可将props值赋值给本地data变量再操作，或者通过事件通知父组件修改源数据。

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