Vue親子コンポーネント間のデータ通信--props,$emit


まず親コンポーネントの中のデータが子コンポーネントに伝達されるここではprops,propsは支持物の意味があり,橋渡しと理解できる.propsはセルフコンポーネントに書きます.
サブコンポーネントを定義し、コンポーネントにpropsを登録します.


export default {
    props: {
        message: String  //       <br>    }
}





親コンポーネントで、子コンポーネントを導入し、子コンポーネントに必要な値を入力します.

 

 
import child from './child'  //  child  
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  // data         
            }
        },
        components: {
            child
        }
}



注意:この方法では、親から子にのみ渡され、子コンポーネントは親コンポーネント内のdataを更新できません.
次に、サブコンポーネントのデータが親コンポーネントに伝達されます.ここで$emitを使用します.emitには送信の意味があります.これは理解にかたくありません.
tips: App.vue親コンポーネント/Hello.vueサブアセンブリ
親コンポーネントの内容


 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue          
    alert(evtValue)
   }
  }
 }


サブアセンブリの内容


 export default {
  name: 'hello',
  'methods': {
   chilCall(pars) {
    this.$emit('newNodeEvent', '         ')
   }
  }
 }
 

$emitは、親を呼び出す方法で子から親へのデータ転送を完了します.