vue 父子组件传值

肥喵蒙太奇

已于 2022-05-12 11:28:25 修改

阅读量263

点赞数

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

于 2020-05-12 16:05:19 首次发布

本文链接：https://blog.csdn.net/YYYYYun/article/details/106076988

版权

vue 专栏收录该内容

31 篇文章

订阅专栏

本文深入解析Vue中组件间通信的方法，包括props与$emit实现父子组件通信，v-model双向绑定，provide/inject跨级组件通信，以及事件总线mitt库在非父子组件间的数据共享。适合Vue开发者理解和掌握组件间数据流动机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用props和$emit
单向数据流

<privateModal
  :data="selectedRow[0]"
  @doRefresh="doRefresh"
/>

子组件

export default {
	props:[
		// data: String,
		data: {
	      type: Object,
	      default() {
	        return {}
	      }
	    },
    ],
    methods: {
    	handleClick() {
		  this.$emit('doRefresh')
		},
	}
    
}

通过v-model传值

父组件

<yy-list v-model="value"></yy-list>

子组件

export default {
  // 定义model属性
  model: {
　　 // prop写父组件使用 v-model 绑定的属性,这个名称是自定义的
    prop: "value",
    // event写子组件会向父组件触发的事件,父组件的 v-model可以监听到这个事件,并将vlaue赋值给v-model绑定的属性
    event: "select"
  },
  data: {
	  return(){
	  	selected: ''
	  }
  },
  watch{
	selected: function(val) {
	  this.$emit('selected', val)
	}
  }
}

父组件

<ownModal
  v-if="visible"
  :visible.sync="visible"
 />

子组件

handleCancel() {
  this.$emit('update:visible', !this.visible)
},

provide和inject
用于非父子组件之间共享数据，父组件不需要知道哪些子组件使用它provide的property，子组件不需要知道inject的property来自哪里

export default {
  provide: {
    name: '张三',
    age: 14
  }
}

export default {
  provide(){
  	return {
  		name: "张三",
  		age: 14,
  		// friends: this.friendList.length, // 这样写属于一次性赋值，后续改变了data中friendList也不会改变这里
  		friends: computed(()=>{ this.friendList.length}), // 改变为响应式的写法
  	}
  },
  data(){
  	return {
  		friendList: ["李四","王五","赵六"]
  	}
  }
}

export default {
  inject: ['name','age'],
  mounted () {
    console.log(this.name,this.age);  // lin
  }
}

事件总线mitt库（eventBus）
vue3移除了 $o n 、$ off 和 $once方法，如果要继续使用全局事件总线，要通过第三方的库。
vue2使用

// eventbus.js
import Vue from 'vue'
export const EventBus = new Vue()

import { EventBus } from "./eventbus.js";
// 发送消息
EventBus.$emit(funName, param)
// 接收消息
EventBus.$on(funName, callback(param))

Vue.prototype.$eventBus = new Vue()

// 发送消息
this.$eventBus.$emit(funName, param)
// 接收消息
this.$eventBus.$on(funName, callback(param))

vue3使用一些库，如mitt 或 tiny-emitter
vue3使用

npm install miee

// eventbus.js
import mitt from 'mitt'
const emitter = mitt()
// export const emitter1 = mitt()
export default emitter

 import emitter fro './eventbus'
 ...
method: {
	btnClick(){
		emitter.emit("student", {name: "张三", age: 14})
	}	
}
// b.vue
 import emitter fro './eventbus'
 export default {
 	created() {
		emitter.on("student",(info )=>{
			console.log(info)
		})
	}
 }