Mixin渲染功能组合

Posted 2021-03-30

使用vuejs mixins，你可以编写方法数据和许多其他东西，但渲染功能不能很好地运行。有没有办法让部分模板也可以混合在组件中？

像这样的东西：

MyMxn.js

export popupTemplate = function render(h) {
};

export default {
 ...
}

MyComponent.vue

<template>
  <div>
    << popupTemplate >>
    ....
  </div>
</template>

<script>
import { MyMxn as default, popupTemplate } from "MyMxn.js";
export default {
   mixins: [MyMxn]
}
</script>

答案

你可以使用Vue slots

这允许您组合这样的组件：

 <navigation-link url="/profile">
 Your Profile
 </navigation-link>

然后在<navigation-link>的模板中，您可能有：

 <a
   v-bind:href="url"
   class="nav-link"
 >
   <slot></slot>
 </a>

甚至其他组件：

<navigation-link url="/profile">
<!-- Use a component to add an icon -->
<font-awesome-icon name="user"></font-awesome-icon>
Your Profile
</navigation-link>