【Vue基礎知識の再強固化】--Vueの境界状況(依存注入など)
1535 ワード
1、要素、コンポーネントへのアクセス
ルート要素:this.$root.XXX(リアルプロジェクトではVueXでグローバルな状態を管理することが多い)
親要素:this.$parent.XXX(多層親this.$parent.$parent.$parent.XXX探し、より深いレベルのネストコンポーネントにうまく拡張できず、依存注入)
サブアセンブリ要素:this.$refs.XXX(レンダリング後に入手可能、this.$nextTick()と組み合わせて使用)
依存注入:親要素設定アクセス可能メソッドprovide;サブコンポーネントアクセス方法injectの設定
2,コンポーネントの循環参照:Aコンポーネント依存B,B依存Aコンポーネントがあります.この場合、コンポーネントまたはメソッドが定義されていないエラーが発生します.次の方法で解決できます.
3,強制リフレッシュ
4,インラインテンプレートとX-Templateテンプレート(あまり使用しない)
インライン:
X-Template:Vueが属するDOM要素の外に定義する必要があります.使用を避けると、テンプレートとそのコンポーネントの他の定義が分離されます.
ルート要素:this.$root.XXX(リアルプロジェクトではVueXでグローバルな状態を管理することが多い)
親要素:this.$parent.XXX(多層親this.$parent.$parent.$parent.XXX探し、より深いレベルのネストコンポーネントにうまく拡張できず、依存注入)
サブアセンブリ要素:this.$refs.XXX(レンダリング後に入手可能、this.$nextTick()と組み合わせて使用)
依存注入:親要素設定アクセス可能メソッドprovide;サブコンポーネントアクセス方法injectの設定
:
provide: function () {return { getMap: this.getMap } }
:
inject: ['getMap']
2,コンポーネントの循環参照:Aコンポーネント依存B,B依存Aコンポーネントがあります.この場合、コンポーネントまたはメソッドが定義されていないエラーが発生します.次の方法で解決できます.
( ):
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
( ), :
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}
3,強制リフレッシュ
$forceUpdate
配列やオブジェクトの変更検出の注意点にまだ気づいていないか、Vueの応答システムに追跡されていない状態に依存している可能性があります.データが変更され、ページが再レンダリングされないため、手動で強制的にリフレッシュする必要があります.this.$forceUpdate()
の使用4,インラインテンプレートとX-Templateテンプレート(あまり使用しない)
インライン:
inline-template
という特殊なattributeがサブコンポーネントに表示されると、このコンポーネントは、配布されたコンテンツとしてではなく、その中のコンテンツをテンプレートとして使用します.これにより、テンプレートの作成作業がより柔軟になります.サブアセンブリ名>X-Template:Vueが属するDOM要素の外に定義する必要があります.使用を避けると、テンプレートとそのコンポーネントの他の定義が分離されます.
:
<p>Hello hello hello</p>
:Vue.component('hello-world', {
template: '#hello-world-template'
})