# その他
# name
型:
string
詳細:
コンポーネントがテンプレートの中で自分自身を再帰的に呼び出すことを許可します。コンポーネントが
app.component
でグローバルに登録されているとき、グローバル ID が自動的にその名前として設定されることに注意してください。name
オプションを指定する他の利点はデバッグです。名前付きのコンポーネントは、警告メッセージでより助けになります。また、vue-devtools (opens new window) でアプリケーションを調査するとき、名前のないコンポーネントは<AnonymousComponent>
として表示されてしまい、あまり情報量が多くありません。name
オプションを提供することで、より情報量の多いコンポーネントツリーを得ることができます。
# inheritAttrs
型:
boolean
デフォルト:
true
詳細:
デフォルトでは、プロパティとして認識されていない親スコープの属性バインディグは「通り抜けて落ちる」ようにされます。つまり、単一のルートコンポーネントがある場合、属性バインディングは通常の HTML 属性として子コンポーネントのルート要素に適用されます。ターゲット要素や他のコンポーネントをラップするコンポーネントを作成する場合、これは必ずしも望んだ動作ではないかもしれません。
inheritAttrs
をfalse
に設定することで、このデフォルトの動作を無効にすることができます。属性は$attrs
インスタンスプロパティで利用でき、v-bind
を使ってルートでない要素に明示的にバインドすることができます。使用方法:
app.component('base-input', { inheritAttrs: false, props: ['label', 'value'], emits: ['input'], template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> ` })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15参照: 属性の継承の無効化
# compilerOptions 3.1+
型:
Object
詳細:
これは アプリケーションの
compilerOptions
設定 に相当するコンポーネントレベルの設定です。使用方法:
const Foo = { // ... compilerOptions: { delimiters: ['${', '}'], comments: true } }
1
2
3
4
5
6
7Important
アプリケーションレベルの
compilerOptions
設定と同じように、このオプションはブラウザ内でテンプレートのコンパイルをするフルビルドを使ったときにのみ尊重されます。
# delimiters deprecated
3.1.0 では非推奨です。代わりに compilerOptions.delimiters
を使ってください。