可以将Vue SFC单文件组件作为mixin混入使用吗?
Vue 组件作为 Mixin 使用相关问题解答
1、该使用方式是否可行?
完全可行。你导入的 Parent.vue 本质上是一个符合规范的组件配置对象,完全满足 Vue mixin 的入参要求,你示例中 Child 组件的 created 钩子可以正常调用 Parent 定义的 sayHello 方法就是可行性的直接验证。
2、template 部分的合并规则
Parent 组件的 <template> 内容不会和 Child 组件的 template 合并,默认会被直接忽略,只有 <script> 标签内导出的配置项会按照 Vue mixin 的标准规则合并到 Child 组件中。
背后的核心逻辑是:
SFC 在被构建工具(vue-loader、vite 官方 Vue 插件等)编译时,<template> 会被编译为 render 函数挂载到 <script> 导出的配置对象上。而 Vue 的 mixin 合并逻辑中,template/render 属于组件自有高优先级属性,只要 Child 组件自身定义了 template(或自定义 render 函数),就会直接覆盖 mixin 携带的 render/template 配置,不会执行任何合并操作。
特殊场景说明:如果 Child 组件没有定义 template 也没有编写自定义 render 函数,此时会 fallback 到使用 Parent 组件的 template 渲染,该场景日常开发中很少出现。
内容的提问来源于stack exchange,提问作者cadenzah
相关产品推荐
相关产品推荐

