vue组件通信

已于 2024-03-12 14:51:15 修改
阅读量741 收藏 1
点赞数
文章标签： elementui vue.js 前端
于 2022-06-06 10:31:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58431406/article/details/125141682
版权

父组件向子组件通信

方法一：通过 props 属性

  • 父组件通过在子组件上定义 props 属性并传递值，将数据传递给子组件。子组件可以通过 props 属性接收父组件传递的数据。

例：创建一个item的组件，在组件中使用props接收值并且给接收的值一些限制

 props: {
    isActive: {
      type: Boolean,//类型为布尔
      default: false,//默认值
      required: false,//是否为必传
    },
}

在使用item组件的地方传值：

<template>
  <div>
    <Item :isActive ='true'></Item>
  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  components: { Item  },
}
</script>

方法二：通过引用（ref） 

  • 父组件可以通过 ref 获取子组件的实例，然后调用子组件的方法或直接访问子组件的属性来实现
//父组件
<el-button type="text" @click="addOrUpdateHandle>update</el-button>
<add-or-update ref="addOrUpdate"></add-or-update>
addOrUpdateHandle() {
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.id)
      })
},
//子组件
init(id) {console.log(id);}

子组件向父组件通信

方法一：通过事件传递数据，$emit()方法 

子组件通过 $emit 方法触发一个自定义事件，并且可以传递数据给父组件。父组件通过在子组件上监听这个事件来接收数据。

父组件：
<user-info-show @active="test"></user-info-show>
export default {
    methods:{
        test(e){
          console.log("子组件传过来的值 / 123", e);
        }
    }
}

子组件：
<view  @click="handleClick()"></view>
export default {
    methods:{
        handleClick(){
        	this.$emit('active',123);
        }
    }
}

方法二：使用回调函数，props

在父组件中通过 props 将一个函数传递给子组件，在子组件内部调用这个函数并传递数据，实现数据的回调到父组件

 在父组件中定义一个函数，并将它作为 props 传递给子组件 

//父组件
<template>
  <div>
    <ChildComponent :callback="handleCallback" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCallback(data) {
      // 处理从子组件传递回来的数据
      console.log('Received data:', data);
    }
  }
}
</script>

在子组件中通过调用回调函数并传递数据，将数据返回给父组件：

//子组件
<template>
  <button @click="sendDataToParent">Send Data to Parent</button>
</template>
<script>
export default {
  props: ['callback'],
  methods: {
    sendDataToParent() {
      const data = 'Hello from child component';
      // 调用父组件传递的回调函数，将数据传递回去
      this.callback(data);
    }
  }
}
</script>

 方法三：使用 Vuex 状态管理：

如果应用程序较为复杂，可以使用 Vuex 来管理应用的状态。子组件可以通过提交 mutation 或者触发 action 的方式改变状态，然后父组件可以监听状态的变化来获取数据。

  1. 在父组件中配置和使用 Vuex：

    • 安装 Vuex 并创建一个 Vuex store。
    • 在 store 中定义状态（state）和修改状态的方法（mutations）。

  2. 在子组件中使用 Vuex：

    • 在需要使用 Vuex 的子组件中导入 Vuex，并通过 mapState 和 mapMutations 等辅助函数，将 Vuex 的状态和方法映射到子组件的计算属性或方法中。

  3. 在子组件中触发 Vuex 的状态变更：

    • 子组件中通过调用映射得到的方法来触发 Vuex 的 mutations，从而修改 Vuex 的状态。

// 父组件 ParentComponent.vue
<template>
  <div>
    <span>{{ count }}</span>
    <ChildComponent />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  computed: {
    ...mapState(['count']) // 将 count 映射到父组件的计算属性中
  }
}
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment']) // 将 increment 映射到子组件的方法中
  }
}
</script>

案例：列表菜单

                       单个使用                                      循环使用

 Item.vue

<template>
  <div :class="{ active: isActive }" @click="handleClick">
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    isActive: {
      default: false, //默认值
      type: Boolean, //类型
    },
  },
  methods: {
    handleClick() {
      this.$emit('active')//使用 $emit 方法触发active自定义事件，并通过自定义事件来实现组件之间的通信
    },
  },
}
</script>
<style scoped>
.active {
  background: rgb(204, 202, 202);
}
</style>

 TitleMenu.vue

<template>
  <div class="menu_box">
    <Item :isActive="isActive" @active="$emit('active')">//@active="$emit('active')"父组件接收到名为 active 的事件时，立即触发一个同名的自定义事件 active 并将其向上传播抛给父元素
      <div class="title_menu">
        <div>
          <slot name="title"></slot>//具名插槽，通过name指定名称来区分不同的插槽
        </div>
        <div>
          <slot name="icon"></slot>
        </div>
      </div>
    </Item>
  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  props: {
    isActive: {
      default: false, //默认值
      type: Boolean, //类型
    },
  },
  components: {
    Item,
  },
}
</script>
<style scoped>
.menu_box {
  transition: 0.5s;
}
.menu_box:hover {
  background: rgb(219, 147, 147);
}
.title_menu {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

单个使用：

<template>
  <div style="width: 250px;">
    <TitleMenu :isActive="select" @active="select = true">
      <template v-slot:title>发现频道</template>
      <template v-slot:icon>></template>
    </TitleMenu>
  </div>
</template>
<script>
import TitleMenu from '../../components/common/TitleMenu.vue'
export default {
  components: { TitleMenu },
  data() {
    return {
      select: false,
    }
  },
}
</script>

循环使用：通过接口渲染数据，实现只有一个 select 状态为 true 的功能

<template>
  <div style="width: 250px;">
    <TitleMenu
      :isActive="item.select"
      @active="updateSelect(index)"
      v-for="(item, index) in titleData"
      :key="index"
    >
      <template v-slot:title>{{ item.uname }}</template>
      <template v-slot:icon>></template>
    </TitleMenu>
  </div>
</template>
<script>
import TitleMenu from '../../components/common/TitleMenu.vue'
export default {
  components: { TitleMenu },
  data() {
    return {
      select: false,
      titleData: [],
    }
  },
  methods: {
    updateSelect(index) {
      this.titleData.forEach((item, i) => {
        //this.$set(item, 'newProperty', 'value');给数组的每一项添加新属性
        // i === index当前循环的索引值 i 是否等于点击的菜单项的索引 index，结果为 true 或 false
        this.$set(item, 'select', i === index);
      })
    },
  },
}
</script>

案例：动态改变数据列数

                        columus="2"                                                      columus="3"

<template>
  <div class="channel_list">
    <div
      v-for="item in channelList"
      :key="item.id"
      class="item"
      :style="{ width: `${100 / columus}%` }"
    >...</div>
  </div>
</template>
<script>
export default {
  props: {
    columus: {
      type: Number,
      default: 2,//默认2列
    },
  },
  data() {
    return {
      channelList: [],
    }
  },
}
</script>
<style scoped>
.channel_list {
  overflow: hidden;
}
.item {
  float: left;
}
</style>

<ChanneList :columus='2'></ChanneList>

案例：封装搜索框

封装一个搜索框，宽度和高度由父元素控制 

封装图标icon：

<template>
  <div>
    <i :class="iconname"></i>
  </div>
</template>
<script>
export default {
  props: {
    iconname: {
      type: String,
      default: 'el-icon-edit',
      required: true,
    },
  },
}
</script>

封装Search：

<template>
  <form class="search_h" @submit.prevent="handleSearch">
     <input type="text" v-model="value" :placeholder="placeholder"></input>
     <div @click="handleSearch">
        <Icon class="icon" :iconname="'el-icon-search'"></Icon>
     </div>
  </form>
</template>
<script>
import Icon from './Icon.vue'
export default {
  components: {
    Icon,
  },
  props:{
     placeholder:{
        type:String,
        default:'请输入搜索内容'
    }
  },
  data() {
    return {
        value:''
    }
  },
  methods: {
    handleSearch() {
        if(this.value){//搜索框里有值的时候才触发事件
           this.$emit('search',this.value)
        }
    },
  }
}
</script>
<style scoped>
.search_h {
   border: 1px solid #cec9c9;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   border-right: 2px;
   position: relative;
}
.search_h input{
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 40px;
    box-sizing: border-box;
}
.icon{
    background: #aaa5a5;
    color: white;
    text-align: center;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
</style>

使用：

<div style="width: 100%; height: 30px;">
     <Search :placeholder="'请输入'" @search="handleSearch"></Search>
</div>
import Search from '../../components/common/search.vue'
components: { Search },
handleSearch(e) {
      console.log(e, '搜索框里的内容')
},

案例：封装一个侧边栏

//icon.vue
<template>
  <div>
    <i :class="iconname"></i>
  </div>
</template>
<script>
export default {
  props: {
    iconname: {
      type: String,
      default: 'el-icon-edit',
      required: true,
    },
  },
}
</script>
//item.vue
<template>
  <div :class="{ active: isActive }" @click="handleClick">
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    isActive: {
      default: false, //默认值
      type: Boolean, //类型
    },
  },
  methods: {
    handleClick() {
      this.$emit('active')
    },
  },
}
</script>
<style scoped>
.active {
  background: rgb(204, 202, 202);
}
</style>

//search.vue
<template>
  <form class="search_h" @submit.prevent="handleSearch">
     <input type="text" v-model="value" :placeholder="placeholder"></input>
     <div @click="handleSearch">
        <Icon class="icon" :iconname="'el-icon-search'"></Icon>
     </div>
  </form>
</template>
<script>
import Icon from './Icon.vue'
export default {
  components: {
    Icon,
  },
  props:{
     placeholder:{
        type:String,
        default:'请输入搜索内容'
    }
  },
  data() {
    return {
        value:''
    }
  },
  methods: {
    handleSearch() {
        if(this.value){//搜索框里有值的时候才触发事件
           this.$emit('search',this.value)
        }
    },
  }
}
</script>
<style scoped>
.search_h {
   border: 1px solid #cec9c9;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   border-right: 2px;
   position: relative;
}
.search_h input{
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 40px;
    box-sizing: border-box;
}
.icon{
    background: #aaa5a5;
    color: white;
    text-align: center;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
</style>

//TitleMenu.vue
<template>
  <div class="menu_box">
    <Item :isActive="isActive" @active="$emit('active')">
      <div class="title_menu">
        <div class="title">
          <slot name="title"></slot>
        </div>
        <div class="icon"> 
          <slot name="icon"></slot>
        </div>
      </div>
    </Item>
  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  props: {
    isActive: {
      default: false, //默认值
      type: Boolean, //类型
    },
  },
  components: {
    Item,
  },
}
</script>
<style scoped>
.menu_box {
  transition: 0.5s;
}
.menu_box:hover {
  background: rgb(219, 147, 147);
}
.title_menu {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title{
  font-weight: bolder;
}
.icon{
  color: #6d757a;
}
</style>

//channel.vue
<template>
  <div class="menu_box" v-if="data">
    <Item :isActive="isActive" @active="$emit('active')">
      <div class="title_menu">
        <span style="font-size: 14px;">
          {{ data.name }}
        </span>
        <span style="color: #6d757a; font-size: 12px;">
          {{ data.count }}
        </span>
      </div>
    </Item>
  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  props: {
    isActive: {
      default: false, //默认值
      type: Boolean, //类型
    },
    data: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  components: {
    Item,
  },
}
</script>
<style scoped>
.menu_box {
  transition: 0.5s;
}
.menu_box:hover {
  background: rgb(219, 217, 217);
}
.title_menu {
  padding: 5px;
}
</style>

//channelist.vue
<template>
  <div>
    <div class="channel_list" :style="{ height: `${height}px` }">
      <div
        v-for="item in channelList"
        :key="item.id"
        class="item"
        :style="{ width: `${100 / columus}%` }"
      >
        <Channe
          @active="$emit('active', item.id)"
          :isActive="item.id === activeId"
          :data="item"
        ></Channe>
      </div>
    </div>
    <div class="collapse" @click="isExpand = !isExpand">
      <span>{{ isExpand == true ? '折叠' : '展开' }}</span>
      <Icon
        :iconname="isExpand == true ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
      ></Icon>
    </div>
  </div>
</template>
<script>
import Channe from '../../components/common/channel.vue'
import Icon from '../../components/common/Icon.vue'
export default {
  props: {
    activeId: {
      type: Number,
      default: 0,
    },
    columus: {
      type: Number,
      default: 2,
    },
  },
  components: {
    Channe,
    Icon,
  },
  data() {
    return {
      channelList: [
        { id: 1, name: '动漫', count: '256' },
        { id: 2, name: '电视剧', count: '56' },
        { id: 3, name: '热门', count: '26' },
        ...
      ],
      isExpand: true, //是否是展开状态
    }
  },
  computed: {
    height() {
      var rows = 3
      if (this.isExpand) {
        rows = Math.ceil(this.channelList.length / this.columus)
      }
      return rows * 32
    },
  },
}
</script>
<style scoped>
.channel_list {
  overflow: hidden;
  transition: 1s;
}
.item {
  float: left;
}
.collapse {
  border: 1px solid #d3d0d0;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: both;
  color: rgb(105, 102, 99);
  cursor: pointer;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>

//Aside.vue
<template>
  <div>
    <div>
      <div style="width: 100%; height: 30px;">
        <Search :placeholder="'请输入'" @search="handleSearch"></Search>
      </div>
      <TitleMenu :isActive="activeId === 3" @active="activeId = 3">
        <template v-slot:title>发现频道</template>
        <template v-slot:icon>></template>
      </TitleMenu>
    </div>
    <ChanneList
      :columus="2"
      @active="activeId = $event"
      :activeId="activeId"
    ></ChanneList>
  </div>
</template>
<script>
import TitleMenu from './TitleMenu.vue'
import ChanneList from './channelist.vue'
import Search from './search.vue'
export default {
  components: { TitleMenu, ChanneList, Search },
  data() {
    return {
      select: false,
      titleData: [],
      activeId: 1,
    }
  },
  methods: {
    handleSearch(e) {
      console.log(e, '搜索')
    },
    updateSelect(index) {
      this.titleData.forEach((item, i) => {
        this.$set(item, 'select', i === index)
      })
    },
  },
}
</script>

小付-小付
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 $emit传函数类型回调获取父组件参数
白瑕 的博客
11-08 2272
$emit传函数类型回调获取父组件参数.
vue 中this.$emit()的返回值是什么？
weixin_34383618的博客
04-06 4818
#vue中this.$emit();返回值是什么 vue中的三大属性:属性 、事件、插槽，---事件 在事件中有 普通事件：@click/@input/@change/@xxx...事件； 修饰符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素； 答：在vue中this.$emit(); 返回值是this; 代码示例： ...
vue中子父组件传值使用$emit，$on，$off
qq_42238554的博客
10-29 4178
子组件可以使用 $emit,让父组件监听到自定义事件 。 vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数 vm.$on( event, fn );//监听event事件后运行 fn； 一、$emit语法 1、this $emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 实例1： 父子组件中各有一个按钮，可以同时操作city 在子组件中定义一个city变量，点击按钮可以修改city的值 <templa
vue组件——组件通信
Sachin的博客
07-09 431
vue组件——组件通信Prop基本使用Prop 类型Prop 验证注意自定义事件基本使用`.sync` 修饰符插槽基本使用具名插槽带数据的插槽动态组件 Prop 基本使用 子组件使用 props，声明需要父组件传递的的参数： 父组件通过绑定的方式传递给子组件 基本例子，子组件： <template> <div class="hello"> <h1&gt...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
Q1761991696的专栏
09-03 8583
一、子组件调用父组件方法: 1.子组件方法: …… methods:{ ShowMore(step){ this.$emit("ChildClick",step);//第一个参数为父组件中调用子组件时@ShowMore方法名,必须保持一致；第二个为参数; } } …… 2.父组件方法: …… methods：{ ShowMore(step){ let result...
vue之$emit返回值
Hi,印象钟情
09-13 2636
使用场景：子组件调用父组件的方法并获取到父组件方法的返回值。如果是兄弟组件的话采用事件车。
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
Vue组件通信的几种实现方法
10-17
主要介绍了Vue组件通信的几种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue组件通信的四种方式汇总
11-27
本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...
Vue子组件向父组件传值（this.$emit()方法）
热门推荐
weixin_42246997的博客
02-26 1万+
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, }, 使用 <in...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。 新增按钮组件： 操作按钮组合组件： 此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。 此时就需要用到组件间的事件触发。 父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
Vue中$emit调用父组件异步方法，子组件通过回调实现同步。
var_Xu的博客
11-05 4511
// 父页面 // 父页面调用组件的html中添加事件 @test=“test” methods : { test(data, cab) { setTimeout(() => { // 这里使用定时器内 模拟执行完容方法 console.log(data) // 这是传递过来的参数 用于处理 data++ cab(data) // 将处理完成的数据返回回去
vue 使用$emit 相父组件传递参数的回调函数
quKbin的博客
12-25 1万+
  *** 子组件中的 this.$emit('done ', someDdata) --done为父组件跳转子组件dialog标签中定义的事件名 @done ***父组件中dialog标签中的@done='xxxfunction' --xxxfuncton为methods中执行的方法   1.子组件 -传递 1.点击事件 &lt;el-table-column fixed="ri...
Vue3 emits 结合回调函数的使用
最新发布
PinkCoder
01-24 1131
vue中如何使用回调函数，emits如何结合回调函数让父子组件通信
js-this.$emit()方法，组件A调用组件B中的newB()方法，4种路由跳转
2301_76671906的博客
11-28 1007
this.$emit()方法 向父组件发送自定义事件custom，传递数据，父组件监听自定义事件执行对应的逻辑。2.this.$router.push()与this.$router.replace()3.this.router.go(n)以及this.router.back()
子父传值 this.$emit
kjs--的博客
04-13 892
子组件向父组件传递数据 子组件: 需要做一个事件触发 发出一个事件(给父组件使用的事件类型) 使用this.$emit发出事件并传递数据 通过this发出的事件 只能有父组件监听(兄弟不行) this是当前的组件实例 语法： this.$emit(自定义事件类型，传递的数据) 示例: <button @click="tell">告诉我爸爸 我女朋友名字</button> methods: { tell() { this.$emit("getname", th
vue中函数回调传值
阿嚏乱码的地方
04-20 3772
在业务开发中，有时候会碰到一种情况：组件内部会触发一些事件用来请求新的数据，数据请求到后将新的数据继续在组件内进行处理。这个场景我们有三种方式可以实现它： 将数据请求写在组件内部，缺点不好维护，违反了单项数据流的原则。 通常我们可以通过this.$emit() 将事件传递到父组件中，让父组件请求数据，然后再传值给子组件，子组件拿到数据后进行下一步处理。适用大部分场景。 在父组件中写一个数据请...
Vue 父子组件间通信
wushen的博客
09-19 2876
Vue 父子组件间通信 : props 父组件向子组件传递数据 $emit 自定义事件 slot 插槽分发内容
【前端】this.$emit使用方法
m0_64210833的博客
09-28 8411
Vue实际开发中使用到的this.$emit方法的使用
vue组件通信友谊聊吧
04-23
关于 Vue 组件通信, 我可以为您提供一些解决方案。Vue 组件通信是指在一个 Vue 应用程序中，不同组件之间共享数据或将数据从一个组件传递到另一个组件的过程。其中包括父组件向子组件传递数据、子组件向父组件传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值