0は、はじめに
正式にコンポーネントを説明する前に、まず簡単な例を見て：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">{{ count }} times</button>'
})
new Vue({
el: '#app',
})
</script>
</body>
</html>これがあるのは、上記のコードを詳しく見てみましょう。
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">{{ count }} times</button>'
})私たちは最初の世界的な方法はVue.component()、ボタン・カウンタと呼ばれる世界的なコンポーネントを作成します
第1の方法は、コンポーネント名のパラメータであり、2番目のパラメータはオプションのオブジェクトであり、オブジェクトは、2つの属性が含まれ、dataそしてtemplate
プロパティは、dataある対象の機能が返す動的データ記憶のため
オブジェクトとして定義されている場合のコンポーネントは、複数のインスタンスを作成するために使用することができるので、関数として定義される理由は、すべてのインスタンスが同じデータオブジェクトを共有します
プロパティは、templateあるテンプレート文字列コンポーネントを定義し、HTMLコード
コンポーネントがでなければならないことに留意すべきである、単一のルート要素、それはテンプレートの内容は、親要素内にラップされなければならないと言うことです
new Vue({
el: '#app',
})<div id="app">
<button-counter></button-counter>
</div>その後、我々はに渡すことができますnew Vue()カスタム要素の使用など、このコンポーネントで作成されたルート・インスタンス
まあ、部品の予備的な理解のうえ、ここでは詳細に学ぶようになりました
1、コンポーネント登録
コンポーネントの例は、コンポーネントを使用する前に、再利用可能なヴュー、我々は最初のVueを同定することができるようにするために登録されなければならない成分であります
（1）二成分登録パラメータ、すなわち、あるコンポーネント名とオプションの目的は
- コンポーネント名
二つの方法、すなわちケバブケース（名前ダッシュで区切られた）とPascalCaseでコンポーネント名を定義した（最初の文字が大文字にちなんで名付けられました）
ケバブ・ケース：を参照する際に、また、ケバブ・ケースを使用する必要があります
PascalCase：テンプレートを使用する場合は、両方の命名法が用意されています。DOMで使用する場合、唯一のケバブの場合は有効です。
- オプションオブジェクト
受信されたオブジェクトとオプションnew Vue()受信オプションは、唯一の例外はと同様であるelオプションこのような場合の根特異的
（2）成分登録二つの方法、すなわち、あるグローバル登録及びローカルレジスタ
- グローバル登録
私たちは、グローバルメソッドを使用することができますVue.component()方法の最初のパラメータは、コンポーネント名で、2番目のパラメータはオプションのオブジェクトである、グローバルに登録します
コンポーネントの世界的な登録は、新しく作成された任意のインスタンスのルートVueの中で使用することができます
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
new Vue({ el: '#app' })- ローカル登録
ルート・インスタンスのオプション作成するときに我々は使用することができますcomponentsローカル登録のための重要なコンポーネント名で、オプションの値が対象となり、それはオブジェクトであり、
登録部分アセンブリが、そのサブアセンブリに使用することができない、すなわち、以下の例では、2つの成分は、それぞれ内部互いを呼び出すことはできません
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})あなたがしたい場合ComponentAにComponentB利用でき、私たちは、文言を変更する必要があります。
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}プロップ - 図2に示すように、データはサブアセンブリに伝達されます。
コンポーネント登録の一部のカスタムプロパティを支える、特性値を小道具に渡されたとき、そのコンポーネントインスタンスの属性となります
（1）静的な小道具を通過
次の例では、静的な値を下支えするために渡し、Title Here
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<title-item title="Title Here"></title-item>
</div>
<script>
Vue.component('title-item', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
el: '#app'
})
</script>
</body>
</html>（2）動的な小道具を提供
次の例では、渡されたv-bind小道具に動的オブジェクトをバインドし、content
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<title-item v-bind:title="content.title"></title-item>
</div>
<script>
Vue.component('title-item', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
el: '#app',
data: {
content: {
'title': 'Title Here'
}
}
})
</script>
</body>
</html>（3）及びプロペラタイプの検証を支えます
上記の2つの例では、小道具は、文字列プロップでそれぞれが文字列の配列であり、
しかし、実際には、小道具も、他のタイプもあり
その後、我々は、オブジェクトの値のオブジェクトキーの小道具の名前がタイプ小道具であるされ、小道具でオブジェクトを一覧表示することができます
Vue.component('my-component', {
props: {
propA: String,
propB: Number,
propC: Boolean,
propD: Array,
propE: Object,
propF: Function
// ...
},
// ...
})タイププロップので、（次の公式文書の一例である）プロプの種類は、我々は、認証の支柱をカスタマイズできるかどうかを決定する必要があります
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})小道具の検証が失敗した場合、（バージョンを構築するための開発環境）Vueが警告コンソールを生成します。
3、親コンポーネントにデータを渡す - カスタムイベントを
支柱は、一方向ダウンリンクはなく、その逆、サブアセンブリを支えるために流下であろう親を更新、すなわち、結合されています
サブアセンブリは、親コンポーネントにデータを渡す必要がある場合は、カスタムイベントを使用する必要があります
親コンポーネントとすることができるv-on任意のイベントリスナサブコンポーネントインスタンス、およびサブアセンブリができ$emit()イベントをトリガ
（1）サブコンポーネントイベントを監視
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
</html>のは、上記のコードの詳細な説明を見てみましょう：
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})まず、ボタン、カウンターと呼ばれるコンポーネントを定義します
サブコンポーネントボタンカウンタの使用は、v-onネイティブのイベントのクリックをリッスンし、イベントハンドラがありますincrementHandler()
でincrementHandler()、最初の（データサブアセンブリ）カウンタ値に1を加え、その後、カスタムイベントインクリメントをトリガ
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})また、ルート・コンポーネントv-onのカスタムイベントの増分を聞いて、イベントハンドラがありますincrementTotal()
でincrementTotal()合計（データのルート成分）の値は、プラス1
（2）イベントによって値をスロー
私たちはできる$emit()関数内に2つ目の引数の値を投げます
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment', 2)
}
},
})そして、イベントハンドラの最初のパラメータの値を受け取ります
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function (value) {
this.total += value
}
}
})