vueは二つのコンポーネント間のデータ共有と修正操作を実現する。

5437 ワード

vue コンポーネントデータ共有

私たちはvueを使用して開発する過程でこのようなことがあります。親のコンポーネントにサブコンポーネントを導入して、親のコンポーネントの値をサブコンポーネントに伝えて表示する必要があります。また、親のコンポーネントの値を変更することもできます。
私の現在のプロジェクトの開発を例にとって、下のページのようです。

父のコンポーネントの中で、二つのサブコンポーネントを導入しました。一つは左のナビゲーションバー、もう一つは中間のリッチテキストコンパイラのコンポーネントです。左のナビゲーションバーをクリックすると、中間のページが切り替わります。つまり、導入したサブコンポーネントを変えます。
どのように実現しますか？まず、このページのindex.vueに変数indexを設定します。左のナビゲーションバーもそれぞれ一つのindex値に対応しています。ナビゲーションメニューはselect関数を結びつけています。@select=「handlect」、@はv-onの略字です。
handleeSelect関数はパラメータを受信して、送信して父コンポーネントで受信すればいいです。


 handleSelect(key, keyPath) {
  console.log(key, keyPath);
  this.changeIndex(keyPath[1])
  },
  changeIndex:function(key) {
  this.$emit("IndexChanged",key)
  }

this.emit(「IndexChanged」、key)は、keyの値をIndex Chend関数という名前の中に伝達します。
index.vueでIndexChend受信値をバインドして、

そしてchange関数を呼び出します。このキーでindexを変えてページを切り替えることができます。
次はもっと簡単で直感的な例を通して説明します。新しいTest.vueを作ります。


<template>
 <div id="app">
 
 </div>
</template>
<script>
 export default{
 name:'Test',
 mounted() {

 },
 }
</script>

<style>
</style>

もう一つのTest.2 vueを構築する:


<template>

</template>

<script>
 export default {
 name: "Test2"
 }
</script>

<style scoped>
</style>

Test.vueは親コンポーネントで、Test 2 vueはサブコンポーネントで、次にTestにルートを設定して、ブラウザでアクセスできるようにします。Test 2のテンプレートを定義して、Testで使用できます。
router/index.jsに下記のコードを追加します。


import Test from "../components/Test";
Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
{
 path: '/t',
 name: 'Test',
 component: Test
 }
 ]
})

mail.jsに下記のコードを追加します。


import Test2 from "./components/Test2";

Vue.use(Test2)
new Vue({
 el: '#app',
 router,
 components: {
 App,
 
 "Test2":Test2

 },

 template: '<App/>'
})

今はtest 2ページにこのような文を書きます。


<template>
<div>
 {{text2}}
</div>
</template>

<script>
 export default {
 name: "Test2",
 data(){
  return{
  text2:"  Test2  "
  }
 }

 }
</script>
<style scoped>

</style>

testにtest 2を導入し、同時に変数textを定義し、ページに表示します。コードは以下の通りです。


<template>
 <div id="app">
 {{text1}}
 <Test2></Test2>

 </div>
</template>
<script>

 import Test2 from "./Test2";
 export default{
 name:'Test',
 components: {Test2},
 data(){
  return{
  text1:"  Test1  "
  }
 },
 mounted() {
 },
 }
</script>

<style>
</style>

ブラウザアクセスhttp://localhost:8080/tページは以下の通りです

Test 2がTest 1の値を受信して表示するようにします。
バインディングデータ用v-bind
＜Test 2 v-bind：text 1=“text 1”>
送信されたデータはTestページのtext 1であり、名前もtext 1であり、異なることがありますが、受信時の名前は最初と同じです。
Test 2ページはデータを受信します。propsで受信します。
props:['text 1']
受信後、それをtext 2に送ることもできます。直接ページに表示することもできます。


<template>
<div>
 {{text2}}
 {{text1}}
</div>
</template>

<script>
 export default {
 name: "Test2",
 props: ['text1'],
 data(){
  return{
  text2:"  Test2  "
  }
 }

 }
</script>

<style scoped>
</style>

text 1値を受信しましたが、どうやって同期して変更しますか？もう一つの関数をバインドする必要があります。以下の通りです。


<Test2 v-bind:text1="text1" v-on:textChanged="change($event)"></Test2>
....
methods: {
  change(msg){
  this.text1 = msg;
  }

 },

test 2では、値をtextChangedに発射すればいいです。


mounted() {
  this.$emit("textChanged","   text1  ")
 }

知識を補充します：vueの中でvuexを使って、stateの値を改正します。
1、vuexをインストールする
npm install vuex-S
2、カタログの下でstoreファイルを作成する

3、store.jsでstateを変更する方法を編集する

そしてmian.jsでグローバルに導入します。

最後にコンポーネントで使用します。

これの機能はmuttionsを使ってstateの値を修正します。
以上のvueは二つのコンポーネントの間のデータ共有と修正操作を実現しました。つまり、小編集は皆さんに全部の内容を共有することになります。

Flexフォントの太さの問題は英語のフォントの太さだけです。

ASP.NETでは、xmlのアンチプログレッシブ、キャッシュ依存性を使用して、パーソナライズされたプロファイルをリアルタイムで有効にします。