ホームページ > 記事 > ウェブフロントエンド > vue の親コンポーネントと子コンポーネント間の通信を実装する方法

vue の親コンポーネントと子コンポーネント間の通信を実装する方法

php中世界最好的语言オリジナル: 2018-05-28 11:27:101712ブラウズ

今回は、vue の親コンポーネントと子コンポーネント間の通信を実装する方法と、vue の親コンポーネントと子コンポーネント間の通信を実装するための注意事項について説明します。以下は実際的なケースです。

コンポーネントは vue.js の最も強力な機能の 1 つであり、コンポーネントインスタンスのスコープは互いに独立しています。つまり、異なるコンポーネント間のデータは相互に参照できません。次に、コンポーネント間で通信する方法が Vue の重要な知識になります。この記事では、props、$ref、$emit のナレッジポイントを通じて、親コンポーネントと子コンポーネント間の通信を実装する方法を説明します。

通信の実装方法について説明する前に、まず例の基礎として 2 つのコンポーネント Father.vue と child.vue を構築しましょう。

//父组件
<template>
 <p>
  <h1>我是父组件！</h1>
  <child></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

//子组件
<template>
 <h3>我是子组件！</h3>
</template>
<script>
</script>

これら 2 つの部分のコードは非常に明確です。親コンポーネントは import を通じて子コンポーネントをインポートし、それをコンポーネント属性に登録します。その後、タグを使用して子コンポーネントを親コンポーネントに埋め込むことができます。 Father.vue を実行した後の効果は次のとおりです:

効果例 1

1. props を介して通信が行われます

子コンポーネントの props オプションは、親コンポーネントからデータを受信できます。そうです。Props は一方向にのみバインドされています。つまり、親コンポーネントから子コンポーネントにのみ渡すことができ、その逆には渡すことができません。配信方法も 2 つのタイプに分けられます:

(1) 静的配信

サブコンポーネントは props オプションを通じてカスタム属性を宣言し、親コンポーネントはこの属性をコンポーネントに渡すことができます。子コンポーネントはデータを渡します。。

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']  //声明一个自定义的属性
 }
</script>

(2) 動的転送

上記のように静的な値を props に渡すことができることはすでにわかっていますが、より多くの場合、動的データが必要になります。これは、v-bind を使用して実現できます。 v-bind を介して props のカスタム属性をバインドすると、渡されるのは静的な string ではなく、式、ブール値、オブジェクトなど、あらゆるタイプの値にすることができます。

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child>
  <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
  <child v-bind:message="a+b"></child>
  <!-- 用一个变量进行动态赋值。-->
  <child v-bind:message="msg"></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
 data() {
  return {
   a:'我是子组件二！',
   b:112233,
   msg: '我是子组件三！'+ Math.random()
  }
 }
}
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']
 }
</script>

効果は次のとおりです:

効果の例 2

2. 通信は $ref を通じて行われます

ref の公式の説明は次のとおりです: ref は要素またはサブコンポーネントを与えるために使用されます。情報。参照情報は親コンポーネントの$refsオブジェクトに登録されます。

理解できないですよね？当たり前のことですが、私にも理解できません。それはどのように理解すべきでしょうか？私の説明を見てください:

ref がサブコンポーネントで使用される場合、それはコンポーネントインスタンスを指し、$ref を通じて、プロパティとを取得することができます。サブコンポーネントで定義されたメソッド
。
通常の DOM 要素に対して ref を使用すると、$ref を通じて DOM 要素の属性コレクションを取得し、DOM 要素に簡単にアクセスできます。 JQセレクター。

$ref を介して通信を実現するにはどうすればよいですか?次に、$ref を使用して上記の prop で実装された関数を実装します。

<!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child ref="msg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  mounted: function () {
   console.log( this.$refs.msg);
   this.$refs.msg.getMessage('我是子组件一！')
  }
 }
</script>

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  data(){
   return{
    message:''
   }
  },
  methods:{
   getMessage(m){
    this.message=m;
   }
  }
 }
</script>

上記のコードから、ref='msg' を通じて、サブコンポーネントの子のインスタンスが $ref を指すことができることがわかります。 .msg.getMessage () サブコンポーネントの getMessage メソッドを呼び出し、パラメータをサブコンポーネントに渡します。以下は、「console.log(this.$refs.msg);」によって出力される内容であり、ref を通じて得られる内容を誰もがより深く理解できるようになります:

console.log

最終的な効果は次のとおりです次のように:

効果例 3

ここでもう 1 つ追加するのは、prop と $ref の違いです:

prop はデータの転送に焦点を当てており、サブコンポーネントのプロパティやメソッドを呼び出すことはできません。記事コンポーネントを作成する際にタイトルや内容をカスタマイズするなどの使用シナリオには、prop の使用が最適です。 🎜
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧，我按我自己的理解是这样的:

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<template>
 <p>
  <h1>{{title}}</h1>
  <child @getMessage="showMsg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  data(){
   return{
    title:''
   }
  },
  methods:{
   showMsg(title){
    this.title=title;
   }
 }
 }
</script>

<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
  mounted: function () {
   this.$emit('getMessage', '我是父组件！')
  }
 }
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

vue の親コンポーネントと子コンポーネント間の通信を実装する方法

関連記事