vueのいくつかの知識点
データ更新リストは再レンダリングされません
たとえば、配列内のオブジェクトのフィールド数が変化した場合、vueはビューを更新しません.どうしてですか.
それとも上に挙げた例ですか.this.$set解決
コンポーネントラベルにv-modelを使用する
v-modelは特殊な文法糖で、valueと@inputの2つをバインドしたものに相当します.
例えば、私たちは自分でinputコンポーネントをパッケージします.
親コンポーネントで使用
コンポーネントライブラリ開発利器provideとinject
プロジェクトではVuexが一般的に推奨されていますが、開発コンポーネントライブラリではこの技が使いやすいです.参考記事公式ドキュメント
コンポーネントラベルのプロパティ
一般的にコンポーネントラベルで定義されたプロパティは、コンポーネントでpropsで受信されますが、propsを使用しない場合、これらのプロパティはデフォルトでマウントされるコンポーネントの実際のdomルートノードにデフォルト設定されます.
たとえば
最後のリアルdomノード
propsで受信せず、実際のdomノードにこれらの属性を表示したくない場合は、コンポーネントでinheritAttrs:falseで処理できます.
同時に、propsで受信されていない属性データをコンポーネントで$attrsで取得することができる.
v-bindとv-onは単独で使用します(コンポーネントは属性とイベントを世代間で伝達します)
v-bind単独使用とは、一般的にはv-bind:xxx(略記:xxx)のように使用されますが、実際にはv-bindは単独で使用することもできます(この場合は略記できません).例えば、現在のコンポーネントの$attrsをサブコンポーネントに渡すことができます.
同様に、v-onは単独で使用しても、現在のコンポーネントの$listenersをサブコンポーネントに渡すことができます.
これでcomp 2コンポーネントは親コンポーネントの$attrsと$listenersを取得します
たとえば、配列内のオブジェクトのフィールド数が変化した場合、vueはビューを更新しません.どうしてですか.
それとも上に挙げた例ですか.this.$set解決
// 1 , watch
if(this.goodsList.length > 0){//
this.exist = this.goodsList.some((item, index) => {
if(item.id == newVal.id){
// , 1
this.$set(this.goodsList, index, {...newVal, quantity: ++item.quantity});
return true;
}
})
}
コンポーネントラベルにv-modelを使用する
v-modelは特殊な文法糖で、valueと@inputの2つをバインドしたものに相当します.
例えば、私たちは自分でinputコンポーネントをパッケージします.
export default {
props: {
value: {
type: String,
default: ''
}
},
data(){
return {
// , props
inputValue: this.value // value
}
},
methods: {
inputHandler(e){
this.inputValue = e.target.value;
// value
this.$emit('input', this.inputValue);
}
}
}
親コンポーネントで使用
//
コンポーネントライブラリ開発利器provideとinject
プロジェクトではVuexが一般的に推奨されていますが、開発コンポーネントライブラリではこの技が使いやすいです.参考記事公式ドキュメント
コンポーネントラベルのプロパティ
一般的にコンポーネントラベルで定義されたプロパティは、コンポーネントでpropsで受信されますが、propsを使用しない場合、これらのプロパティはデフォルトでマウントされるコンポーネントの実際のdomルートノードにデフォルト設定されます.
たとえば
最後のリアルdomノード
...
propsで受信せず、実際のdomノードにこれらの属性を表示したくない場合は、コンポーネントでinheritAttrs:falseで処理できます.
同時に、propsで受信されていない属性データをコンポーネントで$attrsで取得することができる.
v-bindとv-onは単独で使用します(コンポーネントは属性とイベントを世代間で伝達します)
v-bind単独使用とは、一般的にはv-bind:xxx(略記:xxx)のように使用されますが、実際にはv-bindは単独で使用することもできます(この場合は略記できません).例えば、現在のコンポーネントの$attrsをサブコンポーネントに渡すことができます.
同様に、v-onは単独で使用しても、現在のコンポーネントの$listenersをサブコンポーネントに渡すことができます.
これでcomp 2コンポーネントは親コンポーネントの$attrsと$listenersを取得します