[Vue の基本] 親コンポーネントと子コンポーネント間のデータ転送

親コンポーネントから子コンポーネントにデータを渡す

親コンポーネントの機能:

1. 親コンポーネントのインポートは子コンポーネントを参照します。

2. サブコンポーネントをコンポーネントに登録します。

3. v-bind 属性を通じて値を子コンポーネントに渡します。

例えば：

<child :parent-name="parentName"></child>

サブコンポーネントの機能:

4. 子コンポーネントは、親コンポーネントから props を通じて渡された値を取得します。

props: {
    
     /* 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */ 
  parentName: {
    
    
    type: String,
    default: () => '',
  },
}

子コンポーネントから親コンポーネントにデータを渡す

1. 子コンポーネントでは、子コンポーネントの $emit メソッドを使用して、親コンポーネントにデータを渡すイベントをカスタマイズします。

methods: {
    
    
  sendMsgToParent() {
    
     //1.子组件通过子定义事件child-msg的方式将msg传给父组件
    this.$emit('child-msg', this.msg)
  }
}

2. 親コンポーネントは、子コンポーネントのカスタム イベントをリッスンすることで、子コンポーネントによって渡された値を取得します。

<child @child-msg="getChildMsg" :parent-name="parentName"></child>

親コンポーネントは、getChildMsg 関数を呼び出して、リッスンされた値を処理します。