​​Vue.js 父子组件通信的示例

在 Vue.js 中，父组件与子组件之间的通信是很常见的需求。本文将通过一个简单的示例来展示如何实现父组件调用子组件事件（并传递值），以及子组件调用父组件事件的方式。

1. 父组件的实现

首先，我们来看父组件的代码：

<template>  
  <div>  
    <child :isshow="isshow" ref="childref" @prechild="childqry"></child>  
  </div>  
</template>  

<script>  
import child from './child.vue'; // 引入子组件  

export default {  
  components: {  
    child,  
  },  
  data() {  
    return {  
      isshow: true,  
    };  
  },  
  methods: {  
    qry() {  
      let list = [];  
      // 父调子事件  
      this.$refs.childref.dataPro("child", list);  
    },  
    childqry() {  
      console.log('子调父事件');  
    },  
  },  
  mounted() {  
    this.qry(); // 组件挂载后调用父事件  
  }  
};  
</script>

解析

• 子组件的引用：在父组件的模板中，我们通过 <child> 标签使用子组件，并将 isshow 属性和 ref 引用传递给它。
• 数据和方法：data 函数中定义了一个布尔值 isshow。在 methods 中，我们定义了 qry 方法来调用子组件的 dataPro 方法，以及 childqry 方法作为响应子组件事件的回调。
• 生命周期钩子：在 mounted 钩子中，调用 qry 方法。

2. 子组件的实现

接下来，我们来看子组件的代码：

<template>  
  <div>  
  </div>  
</template>  

<script>  
export default {  
  name: 'child',  
  props: {  
    isshow: {  
      type: Boolean,  
      default: null,  
    },  
  },  
  data() {  
    return {};  
  },  
  methods: {  
    qrych() {  
      if (this.isshow) {  
        // 子调父事件  
        let lists = [{ a: '1' }];  
        this.$emit('prechild', JSON.stringify(lists));  
      }  
    },  
    dataPro(type, list) {  
      console.log('父调子事件', type, list);  
    },  
  },  
  mounted() {  
    this.qrych(); // 组件挂载后调用子事件  
  }  
};  
</script>

解析

• 接收父组件传值：子组件通过 props 接收父组件传来的 isshow 属性。
• 数据和方法：子组件定义了 qrych 方法，用于在 isshow 为 true 时，触发一个名为 prechild 的自定义事件，并传递 JSON 字符串化的数据。
• 父调子事件：dataPro 方法用于处理父组件调用的事件，并在控制台输出相应信息。
• 生命周期钩子：在 mounted 钩子中，调用 qrych 方法。

总结

这个简单的示例展示了父子组件之间的双向通信。一方面，父组件可以通过 $refs 调用子组件的方法；另一方面，子组件可以通过 $emit 触发父组件的事件。这种通信方式可以帮助我们高效地管理组件的状态和交互。

希望以上内容对您理解 Vue.js 中父子组件的通信有所帮助！如果您有任何问题或建议，请随时与我联系。