vue组件传参方法整理

最新推荐文章于 2024-08-29 10:13:04 发布

qq_38829069

最新推荐文章于 2024-08-29 10:13:04 发布

阅读量439

点赞数

文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_38829069/article/details/108977857

版权

本文整理了Vue组件间常见的传参方法，包括props、$refs、$emit、eventBus和provide/inject。通过props实现父组件向子组件传递值，$refs用于父组件调用子组件方法和传参，$emit让子组件触发父组件的方法并传递参数。对于兄弟组件通信或深层次的父子通信，使用eventBus。此外，还提及了虽然强大的provide/inject，但官方并不推荐在应用代码中直接使用。

摘要由CSDN通过智能技术生成

文章目录

一、传参方式

全都示例代码

<template>
  <div id="app">
    <p @click="_changeColor">我是父组件</p>
    <app-son :dataList="appData" ref="appSonRef" @notice="_receiveSon"></app-son>
  </div>
</template>

<script>

import appSon from "./components/appSon/index"; //引入子组件appSon
import eventBus from "./eventBus";
export default {
   
  name: 'app',
  provide() {
   
    return {
    provideData: this };
  },
  components: {
   
    appSon
  },
  data(){
   
    return {
   
      appData:{
   
        title:"我是父组件的dataList数据"
      }
    }
  },
  mounted(){
   
    this._getEnentBus();
  },
  methods:{
   
    // 监听 eventBus 的$emit时间 
    _getEnentBus(){
   
      // 这里记得 that = this;因为eventBus.$on里的this是eventBus的实例，不是父组件的this
      const that = this;
      eventBus.$on("_noticeFather", function(val) {
   
        // 做些 事情
        console.log(val)
      });
      // 下面可以继续监听其它的方法
      // eventBus.$on("_noticeFather1111", function(val) {
   
      //   // 做些 事情
      //   console.log(data)
      // });
    }</