Vue.js函數式組件的全面瞭解

(String a, String b) -> a.toLowerCase() + b.toLowerCase();

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

type GreetingProps = {
 name: string;
}
 
const Greeting:React.FC<GreetingProps> = ({ name }) => {
 return <h1>Hello {name}</h1>
};

interface IGreeting<T = 'm' | 'f'> {
 name: string;
 gender: T
}
export const Greeting = ({ name, gender }: IGreeting<0 | 1>): JSX.Element => {
 return <h1>Hello { gender === 0 ? 'Ms.' : 'Mr.' } {name}</h1>
};

...我們可以將組件標記為 functional，這意味它無狀態 (沒有響應式數據)，也沒有實例 (沒有 this 上下文)。一個函數式組件就像這樣：
 
Vue.component('my-component', {
  functional: true,
  // Props 是可選的
  props: {
    // ...
  },
  // 為瞭彌補缺少的實例
  // 提供第二個參數作為上下文
  render: function (createElement, context) {
    // ...
  }
})
 
...
 
在 2.5.0 及以上版本中，如果你使用瞭[單文件組件]，那麼基於模板的函數式組件可以這樣聲明：
 
<template functional>
</template>

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<template functional>
  <div>
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px; color: blue;">{{ props.row.date }}</span>
  </div>
</template>

export default {
  functional: true,
  render(h, {props}) {
    const {row} = props;
    return h('el-popover', {
        props: {trigger: "hover", placement: "top"},
        scopedSlots: {
          reference: () => h('div', {class: "name-wrapper"}, [
            h('el-tag', {props: {size: 'medium'}}, [row.name + '~'])
          ])
        }
      }, [
          h('p', null, [`姓名: ${ row.name }`]),
          h('p', null, [`住址: ${ row.address }`])
      ])
  }
}

render: function (createElement, context) {}

<date-col v-bind="scope" @icon-click="onDateClick" />

<i class="el-icon-time" 
      @click="() => listeners['icon-click'](props.row.date)">
    </i>

/**
 * 用於函數式組件的事件觸發方法
 * @param {object} listeners - context 中的 listeners 對象
 * @param {string} eventName - 事件名
 * @param {...any} args - 若幹參數
 * @returns {void} - 無
 */
export const fEmit = (listeners, eventName, ...args) => {
    const cbk = listeners[eventName]
    if (_.isFunction(cbk)) cbk.apply(null, args)
    else if (_.isArray(cbk)) cbk.forEach(f => f.apply(null, args))
}

import filters from '@/filters';
 
const { withColon } = filters;
 
//...
 
// render 返回的 jsx 中
<label>{ withColon(title) }</label>

<el-skeleton :loading="skeLoading">
    real text
    <template slot="template">
      <p>loading content</p>
    </template>
</el-skeleton>

export default {
  functional: true,
  props: ['ok'],
  render(h, {props}) {
    return h('el-skeleton' ,{
      props: {loading: props.ok},
      scopedSlots: {
        default: () => 'real text',
        template: () => h('p', null, ['loading context'])
      }
    }, null)
  }
}

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>
 
對於這個組件，children 會給你兩個段落標簽，而 slots().default 隻會傳遞第二個匿名段落標簽，slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots()，因此你可以選擇讓組件感知某個插槽機制，還是簡單地通過傳遞 children，移交給其它組件去處理。

<strong class={type} domPropsInnerHTML={formatValue(item, type)} />

h('p', {
      domProps: {
            innerHTML: '<h1>hello</h1>'
      }
})

const _insertCSS = css => {
    let $head = document.head || document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    $head.appendChild(style);
    $head = null;
};

interface IProps {
 year: string;
 quarters: Array<'Q1' | 'Q2' | 'Q3' | 'Q4'>;
 note: {
  content: string;
  auther: stiring;
 }
}

import Vue, { CreateElement, RenderContext } from 'vue';
 
...
 
export default Vue.extend({
  functional: true,
  render: (h: CreateElement, context: RenderContext<IProps>) => {
     console.log(context.props.year);
   //...
  }
});

import { h, ref } from "@vue/composition-api";
 
export default {
  model: {
    prop: "value",
    event: "zouni"
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const counter = ref(props.value);
    const increment = () => {
      emit("zouni", ++counter.value);
    };
 
    return () =>
      h("div", null, [h("button", { on: { click: increment } }, ["plus"])]);
  }
};

<el-input v-model="cValue" />
<counter v-model="cValue" />

it("批量全選", async () => {
    let result = mockData;
    // 此處實際上模擬瞭每次靠外部傳入的 props 更新組件的過程
    // wrapper.setProps() cannot be called on a functional component
    const update = async () => {
      makeWrapper(
        {
          value: result
        },
        {
          listeners: {
            change: m => (result = m)
          }
        }
      );
      await localVue.nextTick();
    };
    await update();
    expect(wrapper.findAll("input")).toHaveLength(6);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    expect(wrapper.findAll("input:checked")).toHaveLength(6);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    expect(wrapper.findAll("input:checked")).toHaveLength(0);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    wrapper.find("tbody>tr:nth-child(3)>td:nth-child(2)>ul>li:nth-child(4)>label").trigger("click");
    await update();
    expect(wrapper.find("tr.whole label input:checked").exists()).toBeFalsy();
  });

import { mount } from '@vue/test-utils'
import Cell from '@/components/Cell'
 
const WrappedCell = {
  components: { Cell },
  template: `
    <div>
      <Cell v-bind="$attrs" v-on="$listeners" />
    </div>
  `
}
 
const wrapper = mount(WrappedCell, {
  propsData: {
    cellData: {
      category: 'foo',
      description: 'bar'
    }
  }
});
 
describe('Cell.vue', () => {
  it('should output two tds with category and description', () => {
    expect(wrapper.findAll('td')).toHaveLength(2);
    expect(wrapper.findAll('td').at(0).text()).toBe('foo');
    expect(wrapper.findAll('td').at(1).text()).toBe('bar');
  });
});

let wrapper = null;
const makeWrapper = (props = null, opts = null) => {
  wrapper = mount(Comp, {
    localVue,
    propsData: {
      ...props
    },
    stubs: {
      Fragment: {
        functional: true,
        render(h, { slots }) {
          return h("div", slots().default);
        }
      }
    },
    attachedToDocument: true,
    sync: false,
    ...opts
  });
};

import { h } from 'vue'
 
const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}
 
DynamicHeading.props = ['level']
 
export default DynamicHeading

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>
 
<script>
export default {
  props: ['level']
}
</script>