ABC4 composition-api

composition-api

プラグインなのでVue.useを忘れずに。 defineComponentで作る。 setupしてreturnで参照したい変数(ref,reactiveで作る)、関数、computedな関数等を作って返却する。

例

/* eslint-disable */
export default defineComponent({
    name: 'Login2',
    // components: {},
    props: {
      loginMessage: {
        type: String,
        required: true // 必須条件
      }
    },
    setup(props, context:SetupContext) {
        const state = reactive({
            name:"",
            pass:"",
        })

        const inputDisabled = computed(()=> {
            if (state.name.length == 0) {
                return true;
            }
            if (state.pass.length == 0) {
                return true;
            }
            return false;
        })

        const onSubmitted = ()=> {
            console.log("onSubmited:"+name);
            context.emit('onSubmitted',{
                name:state.name,
                pass:state.pass
            });
        }

        return {
            state,
            inputDisabled,
            onSubmitted
        }
    }
})

propsは型をinterfaceで定義してやってsetupの引数のところに指定しておくと良い。