首页 > 解决方案 > 修改 VueJS 合并策略以优先考虑来自 mixin 的模板

问题描述

我有一个简单的 Vue 组件和一个要带入该组件的 mixin。组件和 mixin 都定义了一个模板。当 mixin 被合并到组件中时,在组件级别定义的模板就是呈现给文档的内容。

有没有办法让 mixin 中的模板优先于组件中定义的模板?我希望这是整个应用程序中的设置。

我在这里执行的简单代码示例:

HTML

<div id="component-test">
  <basic-component></basic-component>
</div>

<script type="text/x-template" id="hello">
  <div>
    <h2>{{ message }}</h2>
  </div>
</script>

<script type="text/x-template" id="welcome">
  <div>
    <h2>{{ message }}</h2>
    <hr />
    <p>{{ subMessage }}</h2>
  </div>
</script>

JS

const Modify = {
  data() {
    return {
      subMessage: "Welcome to Vue."
    }
  },
  template: '#welcome'
}

const Basic = {
  data() {
    return {
      message: "Hello World!"
    }
  },
  template: '#hello',
  mixins: [Modify]
}

new Vue({ 
  el: '#component-test',
  components: {
    'basic-component': Basic
  }
})

标签: javascriptvue.jsvuejs2

解决方案


推荐阅读