vueコンポーネント間の通信および親コンポーネントでサブコンポーネントを呼び出す方法とプロパティ

2819 ワード
vue
Vueでは、コンポーネントインスタンス間の役割ドメインは孤立しており、サブコンポーネントで親コンポーネントのデータを直接参照できないと考えられ、親コンポーネントでも子コンポーネントのデータを直接使用できないと考えられています.
一、親コンポーネントがpropsを利用してサブコンポーネントにデータを転送する
親コンポーネント:

  //         —      ，HTML

サブアセンブリ:
Vue.component('child', {
  // camelCase in JavaScript
  props:{myMessage},
  template: '{{ myMessage }}'
})

上に示すように、親コンポーネントはテンプレートでサブコンポーネントを参照し、v-bindを介してパラメータmyMessageを渡します.値はparentMsgで、親コンポーネントの動的プロパティとして使用できます.v-bindを使用せずに直接myMessage="helloがサブコンポーネントに静的値を渡すと、渡される値はhello文字列になります.propsを使用して値を伝える過程で、親コンポーネントが関連パラメータの値を変更し、サブコンポーネントもそれに応じて変化しますが、サブコンポーネントがパラメータの変更に対して親コンポーネントに影響を与えるべきではありません.しかし、propsで受信するのは親コンポーネントが渡す参照タイプ(オブジェクトまたは配列)です.の場合、子コンポーネントでデータが変更されると、親コンポーネントのデータも変更されます.これは、両方が同じアドレスメモリを指しているためです.サブコンポーネントの変更が親コンポーネントに影響を与えたくない場合は、受信したデータを直接操作するのではなく、受信したデータを深くコピーした後、サブコンポーネントで使用します.深いコピーはES 6のobj=Objectを直接利用することができる.assign({},myMessage)(computedで定義)では、このようなコンポーネントの変更は親コンポーネントに影響しません.
二、サブコンポーネントが親コンポーネントにパラメータを伝達するイベントメカニズムを利用する
サブアセンブリはthis.$を通ります.Emit()はイベントを配布し,親コンポーネントはv-onを用いてイベントを傍受し,パラメータの伝達を実現する.
サブアセンブリ:
   this.$emit('changeCart',event.target)/*        ，      event.target,          */

親コンポーネント:

また、コンポーネントがネストされている場合は、このメカニズムを使用して特定のレイヤに1つ1つトリガする必要があります.そうしないと、サブコンポーネントのサブコンポーネントを最上位で直接傍受するイベントは傍受できません.まず、親コンポーネントに配布する必要があります.親コンポーネントは上位にトリガーされます.
 
三、ref属性を利用してdom要素またはサブコンポーネントを取得することができ、サブコンポーネントのメソッドを呼び出すことができる(2.0バージョンはelの代わりにrefを使用することに注意)
1.refがdom要素に直接定義されている場合、this.$refs.nameはdomがdomに対して原生的な操作を行うことを取得することができる

 
  
 
  
   this.$refs   dom    （  ref          ，         ）
 
  
 
   
  let menuList=this.$refs['menu-wrapper'].getElementsByClassName('menu-list-hook');//     this.$refs["menuWrapper"]       

  
2、  されたサブコンポーネント でref  を  することにより、 コンポーネントがサブコンポーネントを び す   び  を  する
 コンポーネントでサブコンポーネントを  しrefを  する


  
サブコンポーネントに  されたメソッドshowを び す
 this.$refs.selectfood.show();//              

  
  の ではvue 2.0の
   
[BOJ]196-新入社員
kotlin array最も小さい要素-- min () minby () minmethod ()メソッドを見つける