エレメント間の通信方式

まず素子は何ですか?

Vue.js Guideにはこう書かれています

私が知っている限りでは、インスタンスのプロパティの1つです.
では例は何ですか...

インスタンスのプロパティ、API

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

el:インスタンスを表示する画面の始点(特定のHTMLラベル)

テンプレート:画面に表示する要素(HTML、CSSなど)

データ:ビューの反応性を反映するデータ属性

方法

:画面の動作とイベントロジックを制御する方法

作成

:ビューライフサイクルに関連するプロパティ

watch:データに定義された属性が変化すると他の操作が実行可能となる属性

を定義する.

ビューコンポーネント

ビュー素子は、上位素子と下位素子からなり、素子間の通信によりデータ交換が行われる

では、素子間の通信方式はどうなっていますか。

親部品-->子部品:Props
子部品-->親部品:Event

propsプロパティの使用例

props: ['propsdata'],

v-bind:propsdata="message"

上のコードに注意してください

// 하위 컴포넌트 : childComponent
var childComponent = {
  props: ['propsdata'],
  template: '<p>{{ propsdata }}</p>'
}

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  data: {
    message: 'hello vue.js'
  }
})

<div id="app">
  <child-component v-bind:propsdata="message"></child-component>
  <!-- 위의 출력 결과는 hello vue.js -->
</div>

イベント属性の使用例

this.$emit('update')

上のコードに注意してください

// 하위 컴포넌트 : childComponent
var childComponent = {
  methods: {
    sendEvent: function() {
      this.$emit('update');
    }
  }
}

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  methods: {
    showAlert: function() {
      alert('event received');
    }
  }
})

<div id="app">
  <child-component v-on:update="showAlert"></child-component>
</div>

私のブログの内容は
私のインフラストラクチャから、、、板橋隊長の書類で入手しました!
板橋隊長ありがとうございました!