vue extends继承后修改template的解决方案

vue extends继承后怎么注入虚拟DOM节点

1.需求

使用extends继承一个组件并在上面做功能的修改和扩展，同时需要小小修改一部分的template。

2.extend原理

使用extends时，你实际上是创建了一个新组件，它包含了父组件的所有选项和数据，但是你可以覆盖或添加新的选项。

3.问题

修改通过extends继承的组件的template并不简单，因为Vue的合并策略不会合并template选项。如果你想修改父组件的template，需要采取其他方法。

直接写template的话会将原本的模板全部覆盖掉，但是copy并重写一次template又做了很多无用功显得不够优雅，也失去了继承的意义。

4.解决

暂时没有太完美的方法，目前可用的方案就是【劫持插槽】。
比如继承过来的代码中有一处具名插槽footer，我的需求是在这个位置添加上几个按钮，那么我的代码可以相下面这样处理：

• 使用h函数将虚拟dom挂到footer插槽上

import basenewComponent from '***********';
export default {
    name: 'newComponent',
    extends: basenewComponent ,
    methods：{
        distribute(){},
    },
    render(h) {
        this.$slots.footer = [// 在这儿绘制的底部按钮
            h('el-button', {
                attrs: {
                    type: 'primary',
                    disabled: !this.canSubmit,
                },
                on: {//事件
                    click: () => { this.distribute(false); },
                },
            }, '新按钮1'),
            h('el-button', {
                on: {
                    click: () => { this.distribute(true); },
                },
            }, '新按钮2'),
            h('el-button', {
                on: {
                    click: () => { this.visible = false; },
                },
            }, '取消'),
        ];
        return basenewComponent.render.call(this, h);
    },
};

• 手动合并template

import Parent from './Parent.vue';

export default {
  extends: Parent,
  beforeCreate() {
    this.$super.beforeCreate(); // 确保正确调用父组件的beforeCreate钩子
    this.$options.template = `<div>${this.$options.template}</div>`; // 在父组件模板外添加一个div
  },
  // 其他选项...
};

• 插槽（Slots）函数

在父组件中定义一个插槽函数，然后在子组件中覆盖它。

父组件（Parent.vue）:

<template>
  <div>
    <slot name="default" />
  </div>
</template>

子组件（Child.vue）:

<template slot="default">
  <div>这里是覆盖的内容</div>
</template>

<script>
import Parent from './Parent.vue';

export default {
  extends: Parent,
  // 其他选项...
};
</script>

 

总结：

　　通常情况下，使用extends来修改template并不是最佳实践。extends更适合用于复用非template的选项，如data、methods、computed等。如果你需要修改template，考虑使用插槽（slots）或其他组合组件的方法。

　　请记住，直接修改template可能会导致不可预见的问题，因为父组件的template可能依赖于特定的结构和指令。在使用上述方法时，请确保你充分理解父组件的template结构，并在修改时保持谨慎。

　　

直接修改继承组件的template可能会导致多种不可预见的问题，尤其是当父组件的template依赖于特定的结构、样式或行为时。以下是一些可能出现的问题：

1. 样式问题： 父组件的样式可能依赖于特定的HTML结构。如果你更改了template，可能会导致样式失效或出现布局问题，因为CSS选择器可能不再匹配新的元素结构。

2. 功能问题： 如果父组件的逻辑依赖于特定的元素或组件，修改template可能会破坏这些依赖关系，导致功能不正常或完全失效。

3. 数据绑定问题： 父组件可能使用了数据绑定或计算属性，这些绑定可能依赖于特定的元素。更改template可能会导致数据绑定丢失或计算错误。

4. 事件处理问题： 父组件可能定义了事件监听器或事件委托。修改template可能会影响事件的触发和处理，导致事件处理函数无法正确响应用户交互。

5. 插槽（Slots）问题： 如果你移除了或更改了父组件定义的插槽，可能会导致子组件无法正确渲染或传递数据给父组件。

6. 组件通信问题： 如果父组件使用了provide/inject、ref或v-model等通信机制，修改template可能会破坏这些通信链路，导致数据流中断。

7. 性能问题： 重写template可能会导致额外的DOM操作和重新渲染，影响应用的性能。

8. 维护性问题： 直接修改template会使代码难以维护和理解，尤其是在团队协作环境中。这可能会导致代码难以跟踪和调试。

为了避免这些问题，建议使用Vue提供的其他组合方式，如mixins、components、props、events和scoped slots等，来扩展和自定义组件。这些方法提供了更清晰、更可控的方式来复用和修改组件的行为，同时保持了组件的封装性和可维护性。如果你确实需要修改template，请确保充分理解父组件的工作原理，并在修改前进行彻底的测试。