kusa-mochi

import { reactive, computed } from "vue";
export default function {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
  });
  function increment() {
    state.count++;
  }
  return {

kusa-mochi

<template><!--省略--></template>

<script>
import useCounter from "./useCounter";
export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,

kusa-mochi

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {

kusa-mochi

<template><!-- 省略 --></template>

<script>
import CounterMixin from "./CounterMixin";
export default {
  mixins: [CounterMixin],
  methods: {
    decrement() {
      this.count--;
    }

kusa-mochi

<template>
    <div class="root">
        <div>data: {{sampleProp}}</div>
        <slot></slot>
        <slot name="test"></slot>
    </div>
</template>

<script>
export default {

kusa-mochi

export default function (WrappedComponent) {
    return ({
        props: typeof WrappedComponent === 'function'
            ? WrappedComponent.options.props
            : WrappedComponent.props,
        mounted() {
            alert("Enhanced Component was mounted.");
        },
        render(h) {
            const slots = this.$slots;

kusa-mochi

<template>
  <div id="app">
    <base-component>
      Base Component
      <div slot="test">Test Slot</div>
    </base-component>
    <enhanced-component>
      Enhanced Component
      <div slot="test">Test Slot</div>
    </enhanced-component>

kusa-mochi

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {

kusa-mochi

<template>
  <logic-component slot-scope="{ count, double, increment }">
    <div>Count value: {{ count }}</div> 
    <div>Double value: {{ double }}</div>
    <button @click="increment">Increment</button>
  </logic-component>
</template>
<script>
import LogicComponent from "./LogicComponent.vue";
export default {

kusa-mochi

div.base
  <!--共通利用される部分-->
  div {{ sampleProp }}
  <!--呼び出し側から要素を入れ込める部分-->
  block test