今回は、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 を通じて子コンポーネントをインポートし、それをコンポーネント属性に登録します。その後、タグ
効果例 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 を通じて、 プロパティと を取得することができます。サブコンポーネントで定義されたメソッド
。<!-- 父组件 --> <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 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且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中文网其它相关文章!
推荐阅读:
怎样使用nodejs express配置自签名https服务器
以上がvue の親コンポーネントと子コンポーネント間の通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。