Vue组件通信

本文最后更新于：2024年4月25日上午

以下内容适用于Vue2.x

父组件传子组件

props

📌父组件

<script>
 import SonProps from 'xxx'
  
 export default {
   component: {
    SonProps,
   }
 }
</script>

<template>
  <div>
    <SonProps title="Props通信" articleId="999"/>
  </div>
</template>

📌子组件

this.$props和this对象中均会获得props

<script>
  export default {
    props: {
      title: {
        type: String,
        default: 'NULL'
      },
      articleId: {
      	type: Number,
        default: 0
      }
    }
  }
</script>

<template>
	<h1>{{ articleId }} - {{ title }}</h1>
</template>

Provide/Inject

官方文档: 🔗provide/inject (vuejs.org)

📌父组件

<script>
import SonInject from 'xxx'

export default {
  components: {
    SonInject,
  },
  provide: {
    title: 'Provied/Inject',
    articleId: 2
  }
};
</script>

<template>
  <div id="app">
    <SonInject />
  </div>
</template>

📌子组件

<script>
export default {
  inject: ['title', 'articleId']
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <h2>{{ articleId }}</h2>
  </div>
</template>

子组件传父组件

emit

官方文档: 🔗$emit (vuejs.org)

📌父组件

<script>
import SonEmit from "./components/children/SonEmit.vue";

export default {
  components: {
    SonEmit,
  },
  data() {
    return {
      title: "$emit通信",
    };
  },
  methods: {
    updateTitle(newTitle) {
      this.title = newTitle
    },
  }
};
</script>

<template>
  <div id="app">
    <SonProps title="props" articleId="1" />
    <SonInject />
    <div class="emitBox">
      <h1>{{ title }}</h1>
      <!-- 触发`acceptTitle`事件后调用`updateTitle`方法更新 -->
      <SonEmit @acceptTitle="updateTitle" />
    </div>
  </div>
</template>

📌子组件

<script>
export default {
  data () {
    return {
      inputTitle: ''
    }
  },
  methods: {
    sendTitle () {
      this.$emit('acceptTitle', this.inputTitle)  // 触发自定义事件`acceptTitle`
    }
  }
}
  
</script>

<template>
  <div class="container">
    <input v-model="inputTitle"/>
    <button @click="sendTitle">更新标题</button>
  </div>
</template>