VUEサブアセンブリ親活性成分またはメソッドパラメータを呼び出します

経時的親コンポーネントサブアセンブリ、またはメソッドパラメータは、サブアセンブリを直接呼び出すことができ、親コンポーネントサブアセンブリに渡すことができます

父组件:<子-最初:値= "フォーム">
サブコンポーネント:
  名前:「子供第一」、
  小道具:{//受信親成分値上を通過
      値:{}
  }、
JSで直接呼び出すことができます。this.value
直接HTMLで<span>の値が</ span>の

第二に、アクティブなサブアセンブリの親要素を取得する方法:

  1.サブアセンブリ直接法または親コンポーネントのデータを呼び出します。

    。この$のparent.value; //親要素値の値を取得

    。Thisd $ parent.run(); //実行親要素法

  メソッド呼び出しは、または買収が少ない親コンポーネントの値よりも、私は元編集者注を使用する場合にはivew、サードパーティのコンポーネント、必ずしもそう自分自身を書くために取得していない、親コンポーネントサブアセンブリを得ることである。しかし、ノートがピットであることこのコンポーネントが、サードパーティのコンポーネント、サードパーティのコンポーネントは、ああ、確かに何も値または対応する方法ではありません!

  それが行うことになっていますか?

  2.アセンブリその後サブアセンブリの親オブジェクト、親要素または親要素の内部サブアセンブリ保持メソッド呼び出しの値を渡します。

<子供連れ最初:値=「フォーム」:父は=「この」> </子-最初> //親コンポーネントは、現在のオブジェクト上を通過します

  サブアセンブリで

  // 親コンポーネントの上を通過するオブジェクト受信   
小道具:{ 
      値:{}、
      父:オブジェクト
  } 

// 親要素値またはメソッド呼び出し 
==============(」にconsole.logを=」、この.father.res)
 この .father.getUserName()

 

 前記方法は、親コンポーネントサブアセンブリ、サブアセンブリと呼ばれる内部に通過することができます。

親コンポーネントは:
 // :メソッド定義
    fatherFunction(アルギニン){ 
           にconsole.log( "これは方法の親要素である:" + アルギニン)
       } 
// コンポーネントは渡されます 
    。<fatherFunction @まずチャイルド= "fatherFunction"> </チャイルドを最初> 
サブコンポーネント:// コール:この。$ EMIT(「fatherFunction」、この .RES)// 最初のパラメータメソッドの名前で、二番目のパラメータが渡されました


以下は、完全なコード(ライン上で参照するために使用するサードパーティコンポーネントライブラリは、コピーしないでください)です

<テンプレート> 
  <カードクラス= "コンテンツ"> 
    <P>这是父组件</ P>姓名:
    年龄<入力Vモデル= "form.name"プレースホルダ= "何かを入力してください..." /クリア>:
    <入力V-モデル= "form.age"プレースホルダ= "何かを入力してください..."クリアタイプ= "数" /> 
    <分割/> 
    <ボタンタイプ= "情報" @ = "sendFirst">传值给第一クリック个孩子</ button>の
    <ボタンタイプ= "成功"をクリック@ = "getFirstと">从第一个孩子取值</ button>の
    <ボタンタイプ= "警告">警告</ button>の
    <ボタンタイプ= "エラー">エラー</ button>の
    <分割/>结果:
    <入力Vモデル=" RES」タイプ= "テキストエリア":行= "4"プレースホルダ= "結果" /> 
    <デバイダ/> 
    <ROW:ガター= "16">
        <コルスパン= "12"> <子供-最初:値= "フォーム":父= "この" @fatherFunction = "fatherFunction"> </子-最初> </コル> 
        <コルスパン= "12"> <子供秒> </子供秒> </コル> 
    </ ROW> 
    
  </カード> 
</テンプレート> 
<スクリプト> 
輸入ChildFirstから './components/child-first.vue' 
インポートChildSecondから」./components /child-second.vue」
エクスポートデフォルト{ 
  名: "データマネージャ" 
  コンポーネント:{ChildFirst、ChildSecond}、
  データ(){ 
    リターン{ 
      形:{ 
        名:"管理者" 
        年齢: 12 
      }、 
      RES:"123" 
    ;} 
  }、(){}、
  実装
  方法:{ 
       sendFirst(){ 

       }、
       getFirstと(){ 

       } 
       、getUserName(){ 
           (にconsole.log "親要素法である" 
       }、
       fatherFunction(Argで){ 
           にconsole.log( "このメソッド親要素である:" + アルギニン)
       } 
  } 
};
 </ SCRIPT> 
<スタイルのlang = "少ない"スコープ> 
.content { 
  マージン - トップ:20ピクセル、
  テキストは - ALIGN =左:左。
  オーバーフロー:スクロール; 
  背景 - 
  P {色:#F0F0F0;
  高さ:800ピクセル; 
    テキスト - 整列:左; 
    マージン - 下:20ピクセル; 
  } 
}
 </スタイル>

その後:

<テンプレート> 
  <カードのクラス= "内容":DIS-ホバー= "true"のタイトル= "我是第一个子标签"> 
    <分割/>姓名:
    <入力Vモデル= "form.name"プレースホルダ=」 :何か...」クリア/>年龄入力し
    form.age "プレースホルダ= "何かを入力してください..."クリアタイプ= "数"/> <入力V-モデル=" 
    <分割/> 
    <ボタンタイプ= "情報を"クリック= "getFather">获取父组件的值</ボタン> @ 
    <ボタンタイプ= "成功">成功</ button>の
    <ボタンタイプ= "警告">警告</ button>の
    <ボタンタイプ= "エラー">エラー</ button>の
    <分割/> 
    <分割/>结果: 
    <入力Vモデル= "RES"タイプ= "テキストエリア":行= "4"プレースホルダ= "結果" /> 
    <デバイダ/> 
  </カード> 
</テンプレート> 

<SCRIPT>
輸出のデフォルト{ 
  名: "子供-最初" 
  小道具:{ 
      値:{}、
      父:オブジェクト、
    //    getUserName:{//发现写不写都行
    //        タイプ:機能
    //    } 
  }、
  データ(){ 
    リターン{ 
      形:{ 
        名: "llee" 
        年齢: 21 
      }、
      RES: "結果" 
    }。
  }、
  {()搭載
      この .FORMは= この.VALUEと、
  }、
  メソッド:{ 
      getFather(){ 
          にconsole.log("==============="、この.father.res)
           この.father.getUserName()
           この .RES = この.father.res。

          この。$ EMIT( 'fatherFunction'、この.RES)
      } 
  } 
}。
</ SCRIPT> 
<スタイルLANG = "少ない"スコープ> 
.content { 
  マージン - トップ:20ピクセル; 
  背景 - 色:#97c9a7。
}
 </スタイル>

まあ、私は値によって他について書きます

おすすめ

転載: www.cnblogs.com/rainbowLover/p/12068382.html