ホームページ > 記事 > ウェブフロントエンド > Vue の親子コンポーネント、親子コンポーネントの値の転送、および vuex の簡単な分析

Vue の親子コンポーネント、親子コンポーネントの値の転送、および vuex の簡単な分析

不言オリジナル: 2018-07-07 17:33:072824ブラウズ

この記事では、主に Vue の親子コンポーネント、親子コンポーネントと vuex の値の転送についての簡単な分析を紹介します。必要な友人と共有します。

1. Vue の親子コンポーネント間で値はどのように受け渡されるのでしょうか? まず第一に、vue には双方向のバインディングがあるのに、なぜ親コンポーネントと子コンポーネントの間で値の転送の問題が発生するのかということです。この問題も単純です。配列が双方向にバインドされている場合、ページ a と b が num=10 にバインドされていると、混乱しやすくなります。ページ b とページ c が互いにバインドされている場合、num=5 が関連付けられている場合、vue インスタンスの num は誰をリッスンしますか?これが、Vue 公式 Web サイトが、コンポーネント間のデータは 1 つのアイテム内でのみ循環でき、親コンポーネントから子コンポーネントに渡されると述べている理由です。次に、親コンポーネントと子コンポーネントがどのように渡されるかについては、あまり説明しません。価値観を渡す、そして誰が父で誰が子なのか？
例1: まずコンポーネントを書いてson.vueというコンポーネントフォルダに置きます(ネーミングがちょっとネタバレになってます…)

<template>
  <p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是son的num：{{num}}</p>
  </p>
</template>
<script>
export default {
  //props:["num"],//接收父组件传递过来的值，这里我先写上
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6的语法相当于add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

このson.vueコンポーネントは誰でも理解できると思います、numコンポーネントを足したり引いたりします。次に、son.vueを呼び出すindex.vueを書きます

//index.vue
<template>
  <p>
    <son v-bind:num="num"></son>//传递一个值给son.vue，这时候可以把son.vue的props那个注释注销掉了
    <p class="text-link">这里是index的num：{{num}}</p>
  </p>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

このとき、numは両方とも10です。もう一度加算および減算ボタンをクリックすると、「息子の数」が変化し続けるのに対し、「インデックスの数」は常に 10 であることがわかります。これはデータの単一項目の循環です。では、ボタンをクリックして「インデックスの数」を変更するにはどうすればよいでしょうか?現時点では、$emit が機能する必要があります。
index.vueのコードを変更する必要があります

最初に:

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是绑定一个自定义事件

Add

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

それからson.vueでは、メソッドは

methods:{
   add(){
       this.$emit("add");//$emit("add")就是触发父组件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

になるので、

$emit("xxx")は親コンポーネントをトリガーします関数の変更親コンポーネントのデータの num 値を取得し、親コンポーネントは props を通じてその値を子コンポーネントに渡します。これにより、データ転送と親子コンポーネント通信

が可能になります。

これはson.vueとindex.vueの完全なコードです

//son.vue
<template>
<p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是{{num}}</p>
</p>
</template>
<script>
export default {
  props:["num"],
  data () {
    return {
        num:10
    }
  },
   methods:{
       add(){
           this.$emit("add");
       },
       minu(){
           this.$emit("minu");
       }
   }
}
</script>

//index.vue
<template>
 <p>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{{num}}</p>
</p>
</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

次に、vuexとその状態、アクション、ゲッター、ミューテーション、モジュール、ストアについて話しましょう
まず第一に、vuexの公式Webサイトには、次のように書かれています。 vue 状態管理ツール。状態を理解するのは難しいかもしれませんが、単に vue のデータ内の変数として理解することができます。コンポーネント間のデータ変数の関係が複雑になると、変数を抽出して管理します。上記を見て、親コンポーネントと子コンポーネント間の num 間の通信がさらに面倒かどうかを確認してください。データを変更するには $emit を使用する必要があります。倉庫のように num の値を保存する場所があり、それを使いたい人が num の値をリクエストでき、変更したい人がそれを変更できれば素晴らしいでしょう。それが vuex の機能です。これはグローバル変数に少し似ています。コンポーネントを入手したり、何かを変更したりする必要がある場合は、彼のところに来てください。

1. まず第一に、倉庫と同様に、状態は唯一のデータキャリアです。 2. 状態の値を変更したり、コミットを使用したりできるのはミューテーションのみです。 これら 2 つは vuex にとって最も基本的で不可欠なものです。簡単に vuex を管理するには、この 2 つを使用するだけです。こちらをご覧ください https://segmentfault.com/a/11...
3. ゲッターの公式説明: 新しい状態の導出、これは理解するのが難しいです。簡単に言うと、

フィルタリングと組み合わせです!

たとえば、状態に格納された配列があり、その配列には多くのデータが含まれており、ステータスが 0 のデータのみを使用したい場合は、ゲッターを使用できます。ちょっとしたフィルタリングの意味はないでしょうか？したがって、ゲッターは時には便利で必要な場合もあります。。
4. アクションはミューテーションを送信するために使用されます。なんでこんなに冗長に感じるんだろう！実際にはいいえ、これらのアクションで最も重要なことは、非同期操作を含めることができるということです。多くの状況では使用しない可能性があるため、非同期で操作する方法については説明しません。
5. モジュールも補助メソッドです。たとえば、modulesA には完全な状態、アクション、ゲッター、およびミューテーションが含まれますが、modulesB には完全な状態、アクション、ゲッター、およびミューテーションも含まれます。これは、混乱を避けるためにストアをモジュールに分割します。さて、今日はここまでです。公式ウェブサイトのドキュメントをもっと読んで、もっと練習する必要があります。皆様のご指導をお願い致します！学習は本当に難しいです、教えてください...

最後に、記事が役に立った場合は、まだ働いていない私を励ますために星を付けてください。。。ウーウー

</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

二、说说vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官网上说是一个vue的状态管理工具。可能状态比较难理解，大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候，就把其中的变量抽离出来管理。刚好大家可以看看上面，父子组件之间的num之间的通信是不是比较麻烦，改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值，谁要用谁去请求num的值，谁想改就改该多好是吧，vuex就是干这个的，有点全局变量的意思。任何组件需要拿，改东西，都可以找他。

1、首先state是惟一的数据载体，跟仓库一样。
2、而mutations是唯一可以改变state的值的东东，使用commit等。
这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行，如何使用vuex？看这里https://segmentfault.com/a/11...
3、getters的官方说明：派生出新的状态，这个比较难理解。简单来说，就是过滤，组合！
比如说state里面存了一个数组，数组有好多个数据，而我只想要用status：0的那些个，就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用，很必要！。
4、actions是用来提交mutations，wtf？怎么感觉那么多余！其实不是的，这个actions最重要的是可以包含异步操作。如何异步操作就不演示了，因为大家可能很多情况都不会使用它。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations；modulesB也可以有一个完整的state、actions、getters、mutations，他就是将store分割成模块，避免混淆。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Vue の親子コンポーネント、親子コンポーネントの値の転送、および vuex の簡単な分析

関連記事