Question

使用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>

Answer 1

您可以使用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>

Mixin渲染功能合成

1 个答案: