vue mixin template

Vue mixin 是一种可重用的 Vue 组件选项对象，它可以包含组件中的选项，例如数据、计算属性、方法等。通过使用 mixin，我们可以将一些通用的逻辑或功能应用到多个组件中。Mixin 的模板选项用于定义组件的 DOM 结构，可以在 mixin 中定义模板，并在组件中使用。

以下是一个示例：

// 定义一个 mixin
const myMixin = {
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </div>
  `,
  data() {
    return {
      title: 'Mixin Example',
      content: 'This is a Vue mixin example.'
    };
  }
};

// 使用 mixin 的组件
Vue.component('my-component', {
  mixins: [myMixin],
  // 组件自己的选项
});

// 渲染组件
new Vue({
  el: '#app',
});

在上面的示例中，我们定义了一个名为 `myMixin` 的 mixin，其中包含了一个模板选项，模板中使用了 `title` 和 `content` 这两个数据属性。然后我们在组件中使用该 mixin，通过 `mixins` 选项将该 mixin 添加到组件中。

最终渲染的结果是一个包含标题和内容的组件。通过使用 mixin，我们可以在多个组件中共享相同的模板代码和数据属性。