vueコンポーネントにデータを渡す手順の詳細な説明

今回はvueコンポーネントでデータを渡す手順について詳しく説明します。vueコンポーネントでデータを渡す際の注意点を実際に見てみましょう。

Vue のコンポーネント スコープはすべて分離されており、子コンポーネントのテンプレート内で親コンポーネントのデータを直接 参照することはできません。コンポーネント間でデータを転送するには、特定のメソッドを使用する必要があります。コンポーネント間でデータが受け渡される状況は大きく 3 つあります:

親コンポーネントが子コンポーネントにデータを渡す場合と、データが props を介して渡される場合です。

子コンポーネントはイベントを通じて親コンポーネントにデータを渡します。

イベントバスを介して 2 つの兄弟コンポーネント間でデータを転送します。

1. 親コンポーネントが子コンポーネントにデータを渡す

子コンポーネント部分:

<template>
  <p class="child">
    {{ msg }}
  </p>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

child.vue では、msg は data で定義された変数です。親コンポーネントの props: ['msg'] を使用します。

親コンポーネント部分の msg の値を取得します:

<template>
  <p class="child">
    child
    <child :msg="message"></child>
  </p>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

コンポーネントを呼び出すとき、v-bind を使用して msg の値をparent.vue で定義された変数 message にバインドします。これにより、parent.vue 内のメッセージが次のようになります。値は child.vue に渡されます。

単一のデータフロー

親コンポーネントのメッセージが変更されると、子コンポーネントはビューを自動的に更新します。ただし、子コンポーネントでは props を変更したくありません。これらのデータを変更する必要がある場合は、次の方法を使用できます:

方法 1: prop をローカル変数に代入し、必要に応じて prop に影響を与えずにローカル変数を変更します

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法 2: 計算中属性内のプロパティの処理

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

2. サブコンポーネントは親コンポーネントにデータを渡します

サブコンポーネント部分:

<template>
  <p class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </p>
</template>

HTML の値がサブコンポーネントにある場合、サブコンポーネントは主に練習を通じて親コンポーネントにデータを渡します。入力が変更されると、ユーザー名がparent.vueに渡されます。

最初にsendUserメソッドを宣言し、change

event

を使用してsendUserを呼び出します。

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

sendUser で、$emit を使用して、changeName イベントをトラバースし、this.name を返します。ここで、changeName はリレーのように機能するカスタム イベントで、this.name はこのイベントを通じて親コンポーネントに渡されます。

親コンポーネント部分:

<template>
  <p class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </p>
</template>

は、親コンポーネントでgetUserメソッドを宣言し、changeNameイベントを使用してgetUserメソッドを呼び出し、子コンポーネントから渡されたパラメータusernameを取得します

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

getUserメソッドのパラメータmsgが渡されます子コンポーネントから渡されたパラメータ uesrname。

3. 同じレベルのコンポーネント間のデータ転送 場合によっては、2 つのコンポーネントも通信する必要があります (非親子関係)。もちろん、Vue2.0 は Vuex を提供しますが、単純なシナリオでは、空の Vue インスタンスを中央のイベント バスとして使用できます。

<template>
  <p id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </p>
</template>

コンポーネント c1 内:

<template>
  <p class="c1">
    page
    <button @click="changeMsg">click</button>
  </p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

コンポーネント c2 内:

<template>
  <p class="c2">
    {{msg}}
  </p>
</template>
<script>
var Bus = new Vue();
export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

実際のアプリケーションでは、一般にバスが抽出されます:

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

コンポーネントの呼び出し時に参照されます ('./Bus.js' から Bus をインポート)

ただし、この導入方法では、webpack でパッケージ化された後にバスのローカル スコープが表示される場合があります。つまり、2 つの異なるバスが参照され、通常の通信が行われます。

Vue ルート オブジェクトにバスを挿入します。

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

サブコンポーネントの を介して

を呼び出します。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

this.$root.Bus.$on(),this.$root.Bus.$emit()推奨読書:

Vue はカスタム アイコンを使用する アイコンのステップバイステップ分析

Vue2x 画像プレビュー プラグインのステップバイステップの説明

以上がvueコンポーネントにデータを渡す手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。