.sync原則

前提を使用します。

まず、親子通信コンポーネント間、サブアセンブリは、直接の親要素の値を変更しないことを明確にする必要があります。（親要素が兄で、弟は兄の値を変更しませんが、親コンポーネントサブアセンブリは、値を変更することができます）

役割：

いくつかの方法で、サブアセンブリは、親要素の値を変更するには、「直接」することができます。

シーン：

表示制御部と、閉じた爆弾。親コンポーネント内のオープンフレームサブアセンブリの発射した後、ポップアップボックスサブアセンブリを閉じるには、ボタンをクリックしてください。

方法：

1.次のように一般的なプロセス我々は、親子の値を渡します。

// 父组件 
<テンプレート> 
    の<divクラス= "親ファイル"> 
        の<input type = "ボタン"値= "打开子组件" @ = "ショー"をクリックしてください> 
        <！ -子组件插槽- > 
        <子@ changeVisibleState = "changeVisible"：目に見える= "childShow" /> 
    </ div> 
</テンプレート> 

<スクリプト> 
輸入子供から "./child" 
    輸出のデフォルト{ 
        データ（）{ 
            リターン{ 
                childShow：偽
            } 
        }、
        コンポーネント：{ 
            子
        }、
        方法。{ 
            ショー（）{ 
                この .childShow =真; 
            }、
            changeVisible（ヴァル）{ 
                この .childShow = ヴァル。
            } 
        } 
    }
 </ SCRIPT>

// 子组件 
<テンプレート> 
    の<divクラス= "子ファイル"> 
        の<input type = "ボタン"値= "点我隐身" @クリック= "doClose" V-ショー= "目に見える"> 
    </ div> 
< /テンプレート> 

<スクリプト> 
    エクスポートデフォルト{ 
        小道具：[ '可視' ]、
        方法：{ 
            doClose（）{ 
                この。$（ "changeVisibleState"を発する偽）
            } 
        } 
    }
 </ SCRIPT>

2.改善：

このような文言の権利が、より肥大化したが、明らかに私は値を変更したい、あなたは単に指すことはできませんか？

答えはもちろん可能である、です。

私はあなたが私が直接の親要素の値を変更することができないことを考えると確信していますか？私はもっとクールなように、V-モデルをしたいと思います。

VUEも考慮にこの点を取る、それがより良いソリューションを提供しています

// 親コンポーネント
//   書き込み線、矢印を書き込む機能の第一の方法。
//   メソッド名が更新され理由：可視、方法は、以下のサブコンポーネントで定義されて発光します。
<テンプレート> 
    の<divクラス=「親ファイル」> 
        <=クリック=「ショー」@値=「オープンサブコンポーネント」「ボタン」タイプのINPUT> 
        < - -サブアセンブリのスロット！> 
        <子供@Update： =目に見える"（ヴァル）=> = {ヴァル} childShow"可視= "childShow" /> 
    </ div> 
</テンプレート> 

<SCRIPT> 
インポート子から "./child" 
    エクスポートデフォルト{ 
        データ（）{ 
            リターン{ 
                childShow：
        }、
        方法：{ 
            ショー（）{ 
                この .childShow = trueに; 
            } 
            // 簡素化するコード
            // changeVisible（ヴァル）{ 
            //      this.childShow =ヴァル; 
            // } 
        } 
    }
 </ SCRIPT>

// 子组件 
<テンプレート> 
    の<divクラス= "子ファイル"> 
        の<input type = "ボタン"値= "点我隐身" @クリック= "doClose" V-ショー= "目に見える"> 
    </ div> 
< /テンプレート> 

<スクリプト> 
    輸出デフォルト{ 
        小道具：[ '目に見える' ]、
        メソッド：{ 
            doClose（）{ 
                // 修改前代码
                // この$（偽、 "changeVisibleState"）を放出する。

                // 改变写法
                この $発します。 （「更新：目に見える」、偽）。
            } 
        } 
    }
 </ SCRIPT>

3.最後に：

目に見える= "childShow"、VUEがそれを置き換える、糖衣構文を提供する：= "（ヴァル）=> {childShow =ヴァル}" 可視：@Updateためvisible.sync = "childShow"、これは思われませんより簡潔な。

そして、それは次のようになります。

// 父组件 
<テンプレート> 
    の<divクラス= "親ファイル"> 
        の<input type = "ボタン"値= "打开子组件" @ = "ショー"をクリックしてください> 
        <！ -子组件插槽- > 
        <子供：visible.sync = "childShow" /> 
    </ div> 
</テンプレート> 

<スクリプト> 
輸入子供から "./child" 
    輸出のデフォルト{ 
        データ（）{ 
            リターン{ 
                childShow：偽
            } 
        }、
        コンポーネント：{ 
            子
        } 、
        方法：{ 
            ショー（）{ 
                この .childShow = 真。
            } 
            // 簡素化するコード
            // changeVisible（ヴァル）{ 
            //      this.childShow =ヴァル; 
            // } 
        } 
    }
 </ SCRIPT>

// サブアセンブリ 
<テンプレート> 
    の<divクラス= "お子様ファイル"> 
        <=タイプのINPUT "ボタン"値は=をクリックして= "doClose" V-ショー= "目に見える" @ "ステルス私を指す"> 
    </ div> 
< /テンプレート> 

<スクリプト> 
    エクスポートデフォルト{ 
        小道具：[ '目に見える' ]、
        方法：{ 
            doClose（）{ 
                // 変更前
                // この$（falseに"changeVisibleState"は、）EMIT。

                // 文言変更
                // 注：発します関数名は、この形式でなければなりません「アップデート：小道具」小道具名は、の値との間に、私たち親子のコミュニケーションである
                。この $ EMIT（「更新：目に見える」、。偽）;
            } 
        } 
    }
 </ SCRIPT>

おすすめ