1.コンポーネントベース開発の考え方
仕様のコンポーネント：Webコンポーネント
-
我々は、多くの再利用可能なコードとして欲しいです
-
以降のコンポーネントを定義することは容易ではない（HTML、CSS、およびJS）
-
複数の利用コンポーネントは、紛争につながる可能性
Webコンポーネント作成することにより、優れたパッケージ機能を問題のカスタム要素を解決するために
公式サイト：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
上記の仕様の一部を達成VUE
2.成分登録
2.1グローバル文法コンポーネント登録
Vue.component(组件名字,{
data:组件数据,
template:组件模板内容
})
// 注册一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++">点击了{{ count }}次.</button>'
})
2.2コンポーネントの使用法
<div id="app">
<button-counter></button-counter>
</div>
説明：コンポーネントは、互いに独立して、データを再利用することができます
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
2.3コンポーネントの登録の注意事項
-
データは関数でなければなりません
-
コンポーネントテンプレートコンテンツは、単一のルート要素でなければなりません
-
コンポーネントテンプレートコンテンツは、テンプレート文字列を指定できます（ ``）
あなたはサポートを提供する必要があるテンプレートの文字列（ES6文法）
-
コンポーネントの命名
- ダッシュ仕方
Vue.component('my-component', { /* ... */ })- ハンプ方法
Vue.component('MyComponent', { /* ... */ })コンポーネントを使用するときに、コンポーネントという名前のラクダは、そう、コンポーネントは唯一のこぶの方法で文字列のテンプレートで使用することができますが、通常のラベルテンプレートでは、あなたが使用コンポーネントにダッシュかの方法を使用する必要がある場合
2.4ローカルコンポーネントの登録
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB,
'component-c': ComponentC,
}
})
3.成分データとの間の相互作用
3.1親成分値はサブアセンブリ渡します
1.内部部品の値は、支柱によって受信上を通過させます
Vue.component(‘menu-item', {
props: ['title'],
template: '<div>{{ title }}</div>'
})
2.親コンポーネントサブアセンブリは、value属性を通過します
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>
3.小道具プロパティ名の規則
-
、小道具の形でダッシュのテンプレート形式を使用する必要がこぶ使用
-
文字列のテンプレートには、この制限はありません。
Vue.component(‘menu-item', {
// 在 JavaScript 中是驼峰式的
props: [‘menuTitle'],
template: '<div>{{ menuTitle }}</div>'
})
<!– 在html中是短横线方式的 -->
<menu-item menu-title=“nihao"></menu-item>
4.小道具プロパティ値型
-
文字列
-
バリューナンバー
-
ブール値ブール
-
配列array
-
オブジェクトオブジェクト
3.2サブアセンブリ親コンポーネント値渡します
親コンポーネントに情報を渡すためのカスタムイベントを通じ1.サブアセンブリ
<button v-on:click='$emit("enlarge-text") '>扩大字体</button>
2.親コンポーネントサブアセンブリモニタイベント
<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>
親コンポーネントに情報を渡すためのカスタムイベントを通じ3.サブアセンブリ
<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>
4.親コンポーネントサブアセンブリは、イベントによって$イベントをリッスン
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
3.3成分値サンズ非通過
1.中央管理コンポーネント別のイベントとの間の通信
var eventHub = new Vue()
2.モニタイベントと破壊イベント
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
3.トリガ・イベント
eventHub.$emit(‘add-todo', id)
4.ソケットアセンブリ
スロットの役割の4.1コンポーネント
親コンポーネントサブアセンブリにコンテンツを配信
4.2スロットの使用の基本的な構成要素は
1.スロット位置
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
2.スロットの内容
<alert-box>Something bad happened.</alert-box>
4.3匿名のスロットの使用
1.スロットを定義
<div class="container">
<template slot='header'>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
注：複数の値を備え、内蔵Vueのテンプレートを使用することができ、スロットは、専用のプロパティを含み、
2.スロットの内容
<base-layout>
<h1 slot="header">标题内容</h1>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">底部内容</p>
</base-layout>
3.4スコープスロット
シナリオ：再処理のためのサブアセンブリ親コンポーネントの内容
1.スロットを定義
<ul>
<li v-for="item in list" v-bind:key="item.id">
<slot v-bind:item="item">
{{item.name}}
</slot>
</li>
</ul>
2.スロットの内容
<fruit-list v-bind:list="list">
<template slot-scope="slotProps">
<strong v-if="slotProps.item.current">
{{ slotProps.item.text }}
</strong>
</template>
</fruit-list>