vue 템플릿에서 const를 사용하려면 어떻게 해야 합니까?

vue 템플릿에서 const를 사용하려면 어떻게 해야 합니까?

정의하려고 했습니다.const에 있어서*.vue파일:

<script>
    export const CREATE_ACTION = 1,
    export const UPDATE_ACTION = 2
<script>

템플릿에서 사용합니다.

<template>
    ...
    <select :disabled="mode === UPDATE_ACTION">
    ....
</template>

하지만 그것은 효과가 없다.사용방법constVue 템플릿에 포함됩니까?

데이터에 노출되면 @mix3d에서 언급한 바와 같이 불필요하게 반응하게 됩니다.

더 나은 방법은 Vue 객체에 이러한 요소를 추가하는 것입니다. 상세 반응성:

<template>
      <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
export default {
    created() {
        this.CREATE_ACTION = CREATE_ACTION;
        this.UPDATE_ACTION = UPDATE_ACTION;
    }
})
</script>

데이터에 노출:

new Vue({
    data:{
        CREATE_ACTION: CREATE_ACTION,
        UPDATE_ACTION: UPDATE_ACTION
    }
})

플러그인은 여러 컴포넌트에 포함시키고 싶기 때문에 이 용도로 사용할 수 있습니다.

// constsPlugin.js
const YOUR_CONSTS = {
  CREATE_ACTION: 1,
  UPDATE_ACTION: 2
  ...
}

let YourConsts = {}; // As suggested by the comments.

YourConsts.install = function (Vue, options) {
  Vue.prototype.$getConst = (key) => {
    return YOUR_CONSTS[key]
  }
}

export default YourConsts

main.disples 또는 사용자가 정의한 위치new Vue(), 다음과 같이 사용해야 합니다.

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

이제 다음과 같은 구성 요소 템플릿에서 이 기능을 사용할 수 있습니다.

<div>
   <select :disabled="mode === $getConst('UPDATE_ACTION')">
</div>

믹스인을 사용하는 것은 어떻습니까?이게 내가 하는 방식이다.이게 최선인지 권장되는 방법인지는 모르겠지만 코드가 훨씬 더 깔끔해 보입니다.

데이터/액션.개요

export const CREATE_ACTION = 1;
export const UPDATE_ACTION = 2;

export const actionsMixin = {
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION
    }      
  }
}

마이 컴포넌트표시하다

<template>
  <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
import {actionsMixin, CREATE_ACTION} from './data/actions.js';

export default {
  mixins: [actionsMixin]
  data() {
    return {
      action: CREATE_ACTION
    }      
  }
}
</script>

<template>
  <div v-if="FOO_CONST.bar">Something</div>
</template>

<script>
import {FOO_CONST} from './const.js';

export default {
  data() {
    return {
      FOO_CONST: Object.freeze(FOO_CONST) // this makes vue not reactive this data property
    }      
  }
}
</script>

Vue 3에서는 setup()을 사용할 수 있습니다.

예:

<template>
  <div>
    hello {{ fooConst }}
  </div>
</template>

<script>
const fooConst = "bar";

export default {
  setup() {
    return {
      fooConst,
    }
  },
}
</script>

Mixins는 vue 객체에 비반응적으로 상수를 추가하는 훌륭한 방법이라는 것을 알게 되었습니다.

먼저 상수를 만듭니다.

// Action.js
const Action = {
  CREATE: 1,
  UPDATE: 2
}

Action.Mixin = {
  created () {
    this.Action = Action
  }
}

export default Action

다음으로 컴포넌트:

<template>
  <select :disabled="mode === Action.UPDATE">
</template>

<script>
import Action from './Action.js'

export default {
  mixins: [Action.Mixin]
}
</script>

이것은 알레산드로 베누아의 대답과 L. 팔라이오코스타스의 대답 사이의 교배와 같다.

<template>
  <div>
    <p :style="{ color: $options.COLOR }">
      {{$options.HELLO}} {{$options.PERSON}}
    </p>
  </div>
</template>

<script>
const HELLO = 'Hello there.';
const COLOR = 'red';

export default {
  mounted() {
    console.log('Hello world');
  },
  COLOR,
  HELLO,
  PERSON: 'General Kenobi!',
}
</script>

언급URL : https://stackoverflow.com/questions/42662144/how-could-i-use-const-in-vue-template