nuxt3 子组件如何关闭继承父组件

Question

nuxt3 子组件如何关闭继承父组件,
news/index.vue
news/list/[id].vue
新闻列表页继承了父组件的内容如何使子组件不继承父组件可以在单个页面中设置吗
如果没有全局如何设置

Answer 1

【以下回答由 GPT 生成】

在nuxt3中，可以使用<no-inherit>标签来实现子组件不继承父组件的功能。以下是具体的解决方案：

1. 在父组件中引入<no-inherit>标签，并将需要保留的内容放在<no-inherit>标签中，其他内容将不会被继承给子组件。

<!-- news/index.vue -->
<template>
  <div>
    <h1>父组件标题</h1>
    <no-inherit>
      <!-- 保留的内容 -->
      <p>这部分内容不会被子组件继承</p>
    </no-inherit>
    <child-component></child-component>
  </div>
</template>

1. 在子组件中，不需要进行额外的设置即可达到不继承父组件的效果。

<!-- news/list/[id].vue -->
<template>
  <div>
    <!-- 子组件内容 -->
    <h2>子组件标题</h2>
    <p>子组件的内容</p>
  </div>
</template>

通过以上步骤，news/list/[id].vue中的内容将不会继承news/index.vue中的内容。如果其他子组件仍需要继承父组件的内容，可以在需要继承的子组件中正常使用。

如果需要在多个地方使用<no-inherit>标签来关闭继承父组件的功能，可以考虑使用混入（mixin）来实现全局设置。以下是一个示例代码：

1. 创建一个noInheritMixin.js混入文件。

// noInheritMixin.js
export default {
  inheritAttrs: false,
}

1. 在需要全局关闭继承的组件中引入混入文件。

<!-- news/index.vue -->
<template>
  <div>
    <h1>父组件标题</h1>
    <no-inherit>
      <!-- 保留的内容 -->
      <p>这部分内容不会被子组件继承</p>
    </no-inherit>
    <child-component></child-component>
  </div>
</template>

<script>
import noInheritMixin from '@/path/to/noInheritMixin.js'

export default {
  mixins: [noInheritMixin],
}
</script>

现在，在所有引入了noInheritMixin混入的组件中，都将关闭继承父组件的功能。

希望上述解决方案能够帮助你解决问题，如果还有其他疑问，请随时追问。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7800703
• 这篇博客也不错, 你可以看下Nuxt - 页面缓存（从列表进入详情页返回后保持原来位置的搜索条件、结果数据、浏览器滚动条位置等）
• 除此之外, 这篇博客: nuxt.js项目部署到linux服务器，并使用域名访问（说明遇上的大坑，首页静态资源可以访问，但是接口全部失效）中的 3.2.2 访问时首页可以访问，但是首页里面的接口全都没有调用 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^