Vue.js で毎日学ぶ必要があるコンポーネント間の通信

高洛峰
リリース: 2017-01-03 17:26:19
オリジナル
1199 人が閲覧しました

コンポーネントとは何ですか?

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。

コンポーネントを使用する

登録

前に述べたように、Vue.extend() を使用してコンポーネント コンストラクターを作成できます:

var MyComponent = Vue.extend({
 // 选项...
})
ログイン後にコピー

このコンストラクターをコンポーネントとして使用するには、 `Vue.component を使用する必要があります。 (tag , コンストラクター)` **登録**:

// 全局注册组件,tag 为 my-component
Vue.component('my-component', MyComponent)
ログイン後にコピー

カスタム タグ名の場合、Vue.js は W3C ルール (小文字でダッシュを含む) を強制しません )ただし、このルールに従う方が良いでしょう。

コンポーネントが登録されると、親インスタンスのモジュールでカスタム要素 として使用できます。ルート インスタンスを初期化する前に必ずコンポーネントを登録してください:

<div id="example">
 <my-component></my-component>
</div>
 
// 定义
var MyComponent = Vue.extend({
 template: &#39;<div>A custom component!</div>&#39;
})
 
// 注册
Vue.component(&#39;my-component&#39;, MyComponent)
 
// 创建根实例
new Vue({
 el: &#39;#example&#39;
})
ログイン後にコピー

次のようにレンダリングされます:

<div id="example">
 <div>A custom component!</div>
</div>
ログイン後にコピー

コンポーネントのテンプレートは、マウント ポイントとしてのみ機能するカスタム要素を置き換えることに注意してください。インスタンス オプション replace を使用して、置換するかどうかを決定できます。

ローカル登録

各コンポーネントをグローバルに登録する必要はありません。コンポーネントをインスタンス オプション コンポーネントに登録することで、他のコンポーネント内でのみ使用できるようにすることができます:

var Child = Vue.extend({ /* ... */ })
 
var Parent = Vue.extend({
 template: &#39;...&#39;,
 components: {
 // <my-component> 只能用在父组件模板内
 &#39;my-component&#39;: Child
 }
})
ログイン後にコピー

このカプセル化は、ディレクティブ、フィルター、トランジションなどの他のリソースにも適用されます。

糖衣登録構文

イベントを簡単にするために、コンストラクターの代わりにオプション オブジェクトを Vue.component() とコンポーネント オプションに直接渡すことができます。 Vue.js は自動的に舞台裏で Vue.extend() を呼び出します:

// 在一个步骤中扩展与注册
Vue.component(&#39;my-component&#39;, {
 template: &#39;<div>A custom component!</div>&#39;
})
 
// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
 &#39;my-component&#39;: {
  template: &#39;<div>A custom component!</div>&#39;
 }
 }
})
ログイン後にコピー

コンポーネント オプションの問題

Vue コンストラクターに渡されるほとんどのオプションは Vue.extend() でも使用できますが、2 つの特殊なケースがあります。 : データとエル。単にオブジェクトを data オプションとして Vue.extend() に渡した場合を想像してください。

var data = { a: 1 }
var MyComponent = Vue.extend({
 data: data
})
ログイン後にコピー

これの問題は、`MyComponent` のすべてのインスタンスが同じ `data` オブジェクトを共有することです。これは基本的に私たちが望んでいることではないので、`data` オプションとして関数を使用し、この関数が新しいオブジェクトを返すようにする必要があります:

var MyComponent = Vue.extend({
 data: function () {
 return { a: 1 }
 }
})
ログイン後にコピー

同様に、`el` オプションは `Vue.extend で使用されます。 () ` も関数でなければなりません。

テンプレート解析

Vue のテンプレートは DOM テンプレートであり、自分で実装するのではなく、ブラウザーのネイティブ パーサーを使用します。 DOM テンプレートには文字列テンプレートに比べていくつかの利点がありますが、有効な HTML フラグメントである必要があるという問題もあります。一部の HTML 要素には、その中に配置できる要素に制限があります。一般的な制限事項:
•a には他のインタラクティブな要素 (ボタン、リンクなど) を含めることはできません
•ul と ol には li のみを直接含めることができます
•select には option と optgroup のみを含めることができます
•table には thead、tbody、tfoot 、 tr、caption、col、colgroup
•tr には th と td のみを直接含めることができます

実際には、これらの制限により予期しない結果が生じる可能性があります。単純な場合には機能する可能性がありますが、ブラウザーがカスタム コンポーネントを検証するまでは、カスタム コンポーネントの展開の結果に依存することはできません。たとえば、 は、たとえ my-select コンポーネントが最終的に

もう 1 つの結果は、カスタム タグ (