vue親コンポーネントは、子コンポーネントのプロパティとメソッドを呼び出します

前の記事から続けて、vueの親コンポーネントは子コンポーネントから値を取得します。親コンポーネントが子コンポーネントのプロパティメソッドをアクティブに呼び出す必要がある場合、それを実装するにはどうすればよいですか?

入手方法

1.親コンポーネントで子コンポーネントを使用する場合は、子コンポーネントのref属性を定義します

2.親コンポーネントは、this。$ refs.XXXを介して子コンポーネントのプロパティとメソッドを操作できます。

サブコンポーネントSub1.vue

<テンプレート>
     <モジュール:title = "title" />
     <button:click = "run()"> </ button>   
</ template>
<スクリプト>エクスポート{
          名前: "Sub1"、
          data(){{
           //親コンポーネントは、定義された参照を介してタイトルを呼び出すことができます
                  題名: ''
             }
          }
          、メソッド{
              run(){                   
                   console.log( "sub1"); }
         }
    } </ script>

親コンポーネント

<テンプレート>
     <!-ここでサブコンポーネントを使用する場合はref属性を定義します1->
     <sub1 = "sub" />
     <button @ click = "callChild()"> </ button>
</ template>
<script> export {
      名前: 'アプリ'、
      data(){{
               タイトル: 'テスト' 
           }
       }、メソッド{
             callChild(){
            //ここのサブコンポーネントでtitle属性を使用できます
                    console.log(this。$ refs.title)
            //これはサブコンポーネントのメソッドを使用できます
                    this。$ ref.run();
             }
       }、コンポーネント:{
          Sub1}
} </ script>

 

ブロガー:お金を稼ぐためのテスト

モットー:テストと自動化に焦点を当て、研究開発の効率を改善するよう努めます。元の蓄積を完了するためのテストと勤勉さ、読書と財務管理から経済的自由まで。

csdn:https://blog.csdn.net/ccgshigao

ブログパーク:https//www.cnblogs.com/qa-freeroad/

51cto:https://blog.51cto.com/14900374


おすすめ

転載: blog.51cto.com/14900374/2550173