Vue サブコンポーネントから親コンポーネントへのデータの受け渡しの詳細な説明

1. 親コンポーネント app.vue のスクリプトの下にサブコンポーネント HelloWorld.vue を導入します。たとえば、

import HelloWorld from './components/HelloWorld'

2. コンポーネントに追加します。

components:{
    HelloWorld
  }

3. 親コンポーネントのテンプレートの下に子コンポーネントのコンテンツをレンダリングします。

 <HelloWorld />

4. 子コンポーネントが親コンポーネントにデータを渡すコードは以下の通りで、ボタンをクリックするとsendMsgメソッドが呼び出されます。

<template>
  <button @click="sendMsg">点击传递参数</button>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    sendMsg(){
    	//第一个参数是自定义的事件名，它携带第二个参数的内容
    	//第二个参数是传递的数据
        this.$emit('receive',this.msg)
    }
  }
}
</script>

5. 親コンポーネントはデータを受信します。コードは次のとおりです。<HelloWorld @receive="getMsg"/> で、子コンポーネントのカスタム イベントの受信と親コンポーネントの getMsg メソッドが呼び出されます。getMsg 内のデータ(data) メソッドは、子コンポーネントによって運ばれるデータを受信するために使用されます。これにより、子コンポーネントから親コンポーネントへのデータの転送が実現されます。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p >{
   
   {message}}</p>
    <HelloWorld @receive="getMsg"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components:{
    HelloWorld
  },
  data(){
    return {
      message:''
    }
  },
  methods:{
    getMsg(data){
      this.message = data
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>