vueのいくつかの知識点

2333 ワード

データ更新リストは再レンダリングされません
たとえば、配列内のオブジェクトのフィールド数が変化した場合、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を取得します