vueでは親子コンポーネントの通信原理を詳細に説明する

親コンポーネント:

<template>
  <div class="parent">
    <div>     ，      （ ：     ）----{{msg2}}div>
    
    <transmit-child :child-msg="msg" @click-msg="exportMsg">transmit-child>
  div>
template>

<script>
import child from '@/components/child'
export default {
  name: 'parent',
  data () {
    return {
      arr: [1, 2, 3, 4],
      msg: '     ',
      msg2: ''
    }
  },
  components: {
    'transmit-child': child
  },
  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }
}
script>

サブアセンブリ:

<template>
  <div class="child">
    <div>     div>
    <div>{{childMsg}}div>
    <button @click="transmit">            button>
  div>
template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: '     '
    }
  },
  //  props          ，    data 
  props: ['childMsg'],
  methods: {
    transmit () {
      console.log('zi')
      //      （'click-msg'）           (msg)
      this.$emit('click-msg', this.msg)
    }
  }
}
script>

親コンポーネントは、サブコンポーネントにデータを渡します.は、サブコンポーネントがpropsオプションでカスタムプロパティを設定することで、親コンポーネントからのデータを受信します.親アセンブリの中性子アセンブリの場所はv-bind: （ props ）を使用します.親コンポーネントの値はv-bind: （ props ）=‘ ’です.親コンポーネントから渡された値をサブコンポーネントに表示するには、dataプロパティの値にアクセスするように、補間式を使用します.また、props注意点:1.jsにはアルパカで書く2.HTMLにハイフネーションで書く3.propsプロパティは読み取り専用で、変更できません.4.親コンポーネントの影響を受け、親コンポーネントの対応するデータが変化すると、子コンポーネントのプロパティも変化します.

<div id="app">
    this is a parent component
    <child-component :parent-msg="msg">child-component>
div>

<template id="child">
    <div>
        <button >click to showbutton>
    div>
template>
<script src="vue.js">script>
<script>
        new Vue({
            el:'#app',
            data: {
                msg: 'this is parent component'
            },
            components:{
                childComponent: {
                    props:['parentMsg'],
                    template: '#child'
                }
            }
        })

script>

サブコンポーネントは、イベントトリガによって親コンポーネントにメッセージを渡す.サブアセンブリmethodsを切り取る方法コードは、

である.

 methods: {
    transmit () {
      console.log('zi')
      //      'click-msg'           msg，        ，           ，      。
      this.$emit('click-msg', this.msg, ...)
    }
  }

サブアセンブリをクリックしてtransmitメソッドを実行し、さらにthis.$emit('clickMsg', this.msg)メソッドを実行した.1番目のパラメータはイベント名で、2番目のパラメータはサブコンポーネントで親コンポーネントに渡す必要がある値です.親コンポーネントのサブコンポーネントの場所でv-on:clickMsg="exportMsg"を使用して、サブコンポーネントのイベントトリガを監視します.トリガーされると、親コンポーネントのメソッドexportMsgが実行されます.メソッドコードは次のとおりです.

  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }

this.$emit('clickMsg', this.msg)のうちthis.msgは、childValueに伝達され、伝達の目的を達成する.以下に注意点がある(修正して2019.1.16に記す).コンポーネントやpropとは異なり、JavaScript変数名や属性名としてイベント名は使用されないため、camelCaseやPascalCaseを使用する理由はありません.また、v-onイベントリスナーはDOMテンプレートで自動的にフル小文字に変換される(HTMLは大文字と小文字が敏感ではないため、ブラウザはすべての大文字を小文字と解釈する)ため、v-on:myEventはv-on:myeventになり、myEventが傍受されることが不可能になる.したがって、kebab-caseのイベント名は常に使用することを推奨します.2.サブコンポーネントがカスタムイベントをトリガーし、親コンポーネントにデータを送信する方法について説明します.イベントバインディングに基づいて、カスタムイベントをサブコンポーネント上でv-onでバインディングし、ユーザーがサブコンポーネントをクリックしてコンポーネント内のメソッドを呼び出し、このメソッドではvm.$emit()メソッドが呼び出され、カスタムイベントがトリガーされ、このメソッドでデータが渡され、親コンポーネントに渡されます.