TypeScript vue.extend函數代碼示例

export function Mixins<T>(
  ...components: Array<{ new (): any } | ComponentOptions<Vue> | typeof Vue>
): VirtualClass<T> {
  return Vue.extend({
    mixins: components as Array<ComponentOptions<Vue> | typeof Vue>
  }) as any
}

    function connectToComponent(
      nameOrComponent: string | Component,
      optionalComponent?: Component
    ): Component {
      let Component: Component, name: string
      if (typeof nameOrComponent !== 'string') {
        Component = nameOrComponent
        name = getOptions(Component).name || 'wrapped-anonymous-component'
      } else {
        Component = optionalComponent!
        name = nameOrComponent
      }

      const propKeys = keys(
        stateToProps,
        gettersToProps,
        actionsToProps,
        mutationsToProps,
        methodsToProps
      )

      const eventKeys = keys(
        actionsToEvents,
        mutationsToEvents,
        methodsToEvents
      )

      const containerProps = omit(collectProps(Component), propKeys)
      const containerPropsKeys = Object.keys(containerProps)

      const options = {
        name: `connect-${name}`,
        props: containerProps,
        components: {
          [name]: Component
        },
        computed: merge(mapState(stateToProps), mapGetters(gettersToProps)),
        methods: merge(
          mapActions(merge(actionsToProps, actionsToEvents)),
          mapMutations(merge(mutationsToProps, mutationsToEvents)),
          mapValues(merge(methodsToProps, methodsToEvents), bindStore)
        )
      }

      insertLifecycleMixin(options, lifecycle)
      insertRenderer(
        options,
        name,
        propKeys.concat(containerPropsKeys),
        eventKeys
      )

      if (transform) {
        transform(options, lifecycle)
      }

      return typeof Component === 'function' ? Vue.extend(options) : options
    }

 it("default value", function() {
     const Root = Vue.extend({
         render(h) {
             return h(MyFunctionalComponent, { props: { a: "a-value", c: 100 } });
         }
     });
     const $ = querySelectorOf(createComponent(Root).$el);
     assert($(".B").innerText === "b-default");
 });

        describe("validation - auto validation from design type", function () {

            @component({ template: `<div>test</div>` })
            class Validation extends Vue {
                @prop str: string;
                @prop num: number;
                @prop bool: boolean;
                @prop arr: number[];
                @prop func: (v: number) => number;
                @prop({ type: null }) withoutCheck: string;
                @prop({ type: Number }) mismatchType: string;
            }

            const Root = Vue.extend({
                template: `<div>
                             <target ref="target"
                               :str="str" :num="num" :bool="bool" :arr="arr" :func="func"
                               :without-check="withoutCheck" :mismatch-type="mismatchType" />
                           </div>`,
                components: { target: Validation }
            });

            it("values of design types are accepted", function () {
                const root = createComponent(Root, {}, {
                    str: "s", num: 1, bool: true, arr: [1, 2, 3], func: v => v * 2, withoutCheck: "s", mismatchType: "s"
                });
                const c = root.$refs["target"] as Validation;
                assert(c.str === "s");
                assert(c.num === 1);
                assert(c.bool === true);
                assert.deepEqual(c.arr, [1, 2, 3]);
                assert(c.func(1) === 2);
                assert(c.withoutCheck === "s");
                assert(c.mismatchType === "s");
                assert(warns.length === 1);
                assert(/^Invalid prop: type check .* "mismatchType"/.test(warns[0]));
            });

            it("values of other types are rejected", function () {
                // this assert fails now, maybe because bug of vue 2.0.1
                const root = createComponent(Root, {}, {
                    str: 1, num: "s", bool: 1, arr: 1, func: 1, withoutCheck: 1, mismatchType: 1
                });
                assert(warns.length === 5);
                const [w1, w2, w3, w4, w5] = warns;
                assert(/^Invalid prop: type check .* "str"/.test(w1));
                assert(/^Invalid prop: type check .* "num"/.test(w2));
                assert(/^Invalid prop: type check .* "bool"/.test(w3));
                assert(/^Invalid prop: type check .* "arr"/.test(w4));
                assert(/^Invalid prop: type check .* "func"/.test(w5));
            });
        });

const createPosedComponentFactory: PosedComponentFactoryFactory = el => (
  config = {}
) =>
  Vue.extend({
    props,
    provide,
    inject,
    mounted() {
      invariant(typeof this.$el !== 'undefined', `No DOM element found.`);

      const poserConfig = {
        ...config,
        initialPose: this.getInitialPose(),
        onDragStart: this.$listeners['drag-start']
          ? (e: any) => this.$emit('drag-start', e)
          : undefined,
        onDragEnd: this.$listeners['drag-end']
          ? (e: any) => this.$emit('drag-end', e)
          : undefined,
        onPressStart: this.$listeners['press-start']
          ? (e: any) => this.$emit('press-start', e)
          : undefined,
        onPressEnd: this.$listeners['press-end']
          ? (e: any) => this.$emit('press-end', e)
          : undefined,
        onChange: this.$props.onValueChange,
        props: this.getPoserProps()
      };

      // First posed component in tree
      if (!this.$props.withParent || !this._poseRegisterChild) {
        this.initPoser(poseFactory(this.$el, poserConfig));
      } else {
        this._poseRegisterChild({
          element: this.$el,
          config: poserConfig,
          onRegistered: poser => this.initPoser(poser)
        } as ChildRegistration);
      }
    },
    watch,
    methods,
    destroyed,
    render(createElement) {
      return createElement(el, {}, [this.$slots.default]);
    }
  });

import * as Vue from 'vue';

export default Vue.extend({
    template: require('./btnMeau.html'),
    props: {
        btn: {
            type: Object, //btnMeauInterface
            twoWay: true
        }
    },
    created() {
        console.log(this.btn);
    }
});

     v-model="newTask.title"
     @keyup.enter="createTask(newTask, tasks)">
  </li>
  `
// End Template

/**
 * [Input Form Component]
 * @param  {html}   {template [html string]
 */
export const inputform: Object = AppExtend({
  template: html,
  data(): Object {
    return {
      newTask: new Task('', false)
    }
  },
  props: {
    tasks: []
  },
  methods: {
    createTask(task: TaskInterface, tasks: Array<TaskInterface>): void{
      if(task.title !== ''){
        let newTask = new Task(task.title, task.complete);
        tasks.push(newTask);
        task.title = '';
      }
    }
  }
});