const props = defineProps(['initialCounter'])
// counter only uses props.initialCounter as the initial value;
// it is disconnected from future prop updates.
const counter = ref(props.initialCounter)
defineProps({
// Basic type check
// (`null` and `undefined` values will allow any type)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
// Object with a default value
propE: {
type: Object,
// Object or array defaults must be returned from
// a factory function. The function receives the raw
// props received by the component as the argument.
default(rawProps) {
return { message: 'hello' }
}
},
// Custom validator function
propF: {
validator(value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// Function with a default value
propG: {
type: Function,
// Unlike object or array default, this is not a factory function - this is a function to serve as a default value
default() {
return 'Default function'
}
}
})
//<script setup>を使わないやり方↓
export default {
props: {
// 基本的な型チェック
// (`null` 値と `undefined` 値は、任意の型を許可します)
propA: Number,
// 複数の型の可能性
propB: [String, Number],
// 必須の文字列
propC: {
type: String,
required: true
},
// デフォルト値を持つ数値
propD: {
type: Number,
default: 100
},
// デフォルト値を持つオブジェクト
propE: {
type: Object,
// オブジェクトと配列のデフォルトは、ファクトリー関数を使って
// 返す必要があります。ファクトリー関数は、コンポーネントが
// 受け取った生の各プロパティを引数として受け取ります。
default(rawProps) {
return { message: 'hello' }
}
},
// カスタムのバリデーター関数
propF: {
validator(value) {
// 値が以下の文字列のいずれかに一致する必要がある
return ['success', 'warning', 'danger'].includes(value)
}
},
// デフォルト値を持つ関数
propG: {
type: Function,
// オブジェクトや配列のデフォルトと異なり、これはファクトリー関数ではなく、デフォルト値として機能する関数です
default() {
return 'Default function'
}
}
}
}
これは HTML の仕様では、いくつかの特定の要素でのみ自己クロージングタグの省略が認められているからです。最も一般的なのは <input> と <img> です。他のすべての要素では、自己クロージングタグを省略すると、ネイティブの HTML パーサーは開始タグを終了させなかったと判断します。例えば、次のようなスニペットです:
各 Vue コンポーネントインスタンスは、生成時に一連の初期化を行います – 例えば、データ監視のセットアップ、テンプレートのコンパイル、インスタンスの DOM へのマウント、データ変更時の DOM の更新が必要になります。その過程で、ライフサイクルフックと呼ばれる関数も実行され、ユーザーは特定の段階で独自のコードを追加することが可能です。
ライフサイクルフックの登録
例えば、mounted フックは、コンポーネントが最初のレンダリングを終了し DOM ノードを生成した後に、コードを実行するのに使用することができます:
すべてのライフサイクルフックは、呼び出し元の現在アクティブなインタンスを指す this とともに呼び出されます。これはライフサイクルフックを宣言するときにアロー関数の使用を避けるべきであることを意味します。アロー関数を使用した場合、 this を介してコンポーネントインスタンスにアクセスできなくなるためです。
