【Vue】组件用法

爱编程的小学究

已于 2024-06-18 21:51:12 修改

阅读量1.2k

点赞数 10

分类专栏： vue专栏文章标签： vue.js 前端 javascript

于 2024-05-23 17:25:44 首次发布

本文链接：https://blog.csdn.net/weixin_45291798/article/details/138223748

版权

本文详细探讨了Vue组件间的交互，包括props的使用、组件自定义事件（如props接收、$emit及ref的绑定与解绑）、事件总线的应用以及插槽的概念。通过对组件通信方式的深入理解，帮助开发者掌握在Vue中如何实现父子、兄弟组件的数据传递与通信。

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

【前言】
…
【目标】

1 了解组件间传参
2 组件间自定义事件绑定与解绑
3 组件的事件总线，消息订阅与发布的用法
4 组件插槽

一组件间传参

1 props

引入并使用组件：传递参数。父组件 ===> 子组件

<template>
  <div id="app">
  <HelloWorld :msg="msg" :name="name" :edit="edit"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld/index.vue'
export default {
   
  name: 'App',
  components: {
   
    HelloWorld
  },
  data(){
   
    return{
   
      msg:'你好呀!'