Vue親子コンポーネントの同期送信・非同期送信入門（コード付き）

この記事では、Vue の親子コンポーネントの同期送信と非同期送信について説明します。必要な方は参考にしていただければ幸いです。

1. データを同期的に転送する

親コンポーネントの food は、値 0 の type フィールドを props を通じて子コンポーネントに渡します。子コンポーネントは type を取得できます。初期化中に、文字「0 フルーツ」をレンダリングします。

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2 データの非同期送信

双方向バインディングに従って、データの非同期送信を保証します。 VUE の原理では、非同期で渡されるデータを監視する必要があることを知るのは難しくありません。

2.1 props

props によって渡されたデータがテンプレートに関連付けられている場合、コンポーネントの初期化時にデータが監視されます。以下のコードで型と情報を確認できます。
props によって渡されたデータがテンプレートに関連付けられていない場合は、props によって渡されたデータの監視を追加し、watch メソッドでテンプレートに関連付けられたオブジェクトを変更します。以下のコードで child_type を確認できます。このメソッドでは、ウォッチが監視するのは変更されたプロパティであるため、ターゲット オブジェクトを初期化する必要があります。

// 父组件 food.vue
<template>
  <apple :type="type" :info="info"></apple>
</template>
<script>
  data (){
    return {
      type: 0,
      info: {comment: 'ugly food'}
    };
  }
  created () {
      setTimeout (()=>{
        this.type = 1;
      this.info = {comment: 'tasty food'};
    },1000);
  }
</script>
// 子组件 apple.vue
<template>
  <p class="memuManage">
    <span>type: {{child_type}}</span>
    <span>type: {{type|formatterType}}</span>
    <span>info: {{info.comment}}</span>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        child_type: ''
      };
    },
    props: ["type","info"],
    watch: {
      type (newVal) {
        this.child_type = this.formatterType(newVal);
      }
    },
    created () {
      this.child_type = this.formatterType(this.type);
    },
    filters: {
      formatterType: function (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    },
    methods: {
      formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
    }
  };
</script>

2.2 vuex

データはストアに保存され、親コンポーネントは vuex のメソッドを呼び出してデータを変更します。
ストア データがサブコンポーネントのテンプレートに関連付けられている場合、サブコンポーネントが初期化されるときにデータが監視されます。
ストア データがサブコンポーネントのテンプレートに関連付けられていない場合は、ストア データの監視を追加し、監視メソッドで関連付けられたテンプレート オブジェクトを変更します。テンプレートに関連付けられたオブジェクトを初期化する必要があります。

3. データを同期または非同期で転送する

親コンポーネントが子コンポーネントに同期または非同期でデータを転送できる場合、まず子コンポーネントがターゲットと一致する必要があります。作成または計算されたオブジェクトは初期化されており、子コンポーネントは props によって渡されたデータを監視し、ターゲット オブジェクトを変更する必要があります。

以上がVue親子コンポーネントの同期送信・非同期送信入門（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。