13.3、父と息子のコンポーネント

親コンポーネントサブアセンブリは、値を渡します

<div id="app">
<mycode></mycode>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123-父组件中的值'
        },
        components:{
            mycode:{
                template:'<h1>这是一个子组件--{{msg}}</h1>'
            }
        }
    })
</script>

問題は、デフォルトであるコンポーネント、サブアセンブリの伝統的な価値観との間で達成することはできません。このようにする方法は、親アセンブリとデータのメソッドにアクセスすることはできません

実装

プロパティ結合型(V-結合)、結合特性を必要な形式でデータをサブアセンブリに言及する場合、親は、サブアセンブリに伝達され、使用のためのサブアセンブリを使用することができます

  1. <mycode:parentmsg = 'MSG'> </ mycode>
  2. 内部サブアセンブリの小道具の配列を作成し、このカスタムプロパティは、その中に、配列はアクセスすることができます
<div id="app">
<mycode :parentmsg="msg"></mycode>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123-父组件中的值'
        },
        components:{
            mycode:{
                template:'<h1>这是一个子组件--{{parentmsg}}</h1>',
                props:['parentmsg']
            },
        }
    })
</script>

注:すべての小道具コンポーネントのデータは、親コンポーネントサブアセンブリに渡されます。データサブアセンブリ内のデータがカスタマイズされている Ajaxのサブアセンブリの着信データによって、たとえば、データが体を離れて置くことができ、

要約、属性名が定義されているので、次にサブアセンブリアレイ小道具、タグサブアセンブリを形成するために、サブアセンブリで参照データを用いて、結合データをバインドするために必要な親コンポーネントサブアセンブリにデータを渡したいと思っデータを取得することができるサブアセンブリ

  1. 参照サブアセンブリ内のデータバインディングサブアセンブリへのデータの結合
  2. 小道具アレイ列に定義サブアセンブリに対応
  3. このようなサブアセンブリはのデータを使用することができます

メソッド親コンポーネントサブアセンブリ

  1. 親コンポーネントサブアセンブリの送達の方法には、イベントバインディング機構を使用します
  2. @のFunc =「ショー」は、FUNC法サブアセンブリ格納されている名前はなくことなく、サブアセンブリメソッド名に渡された親コンポーネントを表示ショー()処理の実行結果を示している場合FUNCに戻ることに注意してください)()と言うことですFUNCに渡す方法を参照され、あなたはパラメータを渡す必要があるかどうか、このところ、(追加しないでください
  3. サブアセンブリは、これを呼び出すために使用することができる場合。$エミット(「」)の書き込みが二番目のパラメータ以降、メソッドの名前が渡され、プロセスに対応するパラメータは、必要に渡すことができました

おすすめ

転載: blog.csdn.net/weixin_34293902/article/details/91026145