Vue脚手架组件通信传参

一，父组件给子组件传参props

父组件app.vue
:todos=“tdod” :参数的名字(接受的时候用) = “参数的值”

<MyList :todos="todos"></MyList>
<script>
	import MyList from './components/MyList.vue'
	export default {
		name: 'App',
		components: {
			MyList
		},
		data() {
			return {
			todos: [{
						id: '001',
						title: '打代码',
						done: false
					},
					{
						id: '002',
						title: '睡觉',
						done: true
					},
					{
						id: '003',
						title: '吃饭',
						done: false
					}
				]
			}
		}
	}
</script>

子组件MyList.vue
props:[‘todos’] props:[‘参数的名字’]

<template>
	<div class="listContent">
		<MyItem v-for="todo in todos" :key="todo.id" :todo="todo"></MyItem>
	</div>
</template>

<script>
	import MyItem from '../components/MyItem'
	export default {
		name: 'MyList',
		components: {
			MyItem
		},
		props:['todos'],
	}
</script>

二，子组件给父组件传参

props

当子组件使用props给父组件传参是，需要父组件事先声明一个函数
注意props不仅可以传递数组对象整数等，还可以传递函数
父组件app.vue

...
<MyHeader :addTodo="addTodo"></MyHeader>
...
<script>
...
methods: {
			// 添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			}
		},
...
</script>

子组件MyHeader.vue
触发，从父组件传来的函数，从而把参数传递过去

		<input type="text" placeholder="请输入您的任务名称,按回车确认" @keydown.enter="add" v-model="title">
...
props:['addTodo'],
methods:{
			add(){
				if(this.title.trim()){
					const todoObj = {
						id:nanoid(),
						title:this.title,
						done:false
					}
					this.addTodo(todoObj)
				}else{
					alert('请输入要完成的任务')
					this.title = ""
					return 
				}
				this.title=""
			}
		}
...

组件的自定义事件 通过$emit去触发

1.第一种方式 通过v-on === @ 来绑定自定义事件
@addTodo=“addTodo” @自定义事件的名字 = “回调函数”
父组件app.vue

...
<MyHeader @addTodo="addTodo"></MyHeader>
...

2.第二种方式 通过ref $on来添加自定义事件

...
<MyHeader ref="myHeader"></MyHeader>
...
<script>
...
	mounted(){
			this.$refs.myHeader.$on('addTodo',this.addTodo)
		}
...
</script>

子组件 MyHeader .vue

	<input type="text" placeholder="请输入您的任务名称,按回车确认" @keydown.enter="add" v-model="title">
...
methods:{
			add(){
				if(this.title.trim()){
					const todoObj = {
						id:nanoid(),
						title:this.title,
						done:false
					}
					this.$emit.addTodo(todoObj)
				}else{
					alert('请输入要完成的任务')
					this.title = ""
					return 
				}
				this.title=""
			}
		}
...

解绑自定义事件

在哪里触发事件，就在那里解绑事件

this.$off('demo')//解绑一个自定义事件
this.$off(['demo','其他事件',''])//解绑多个自定义事件
this.$off()//解绑所有自定义事件

注意点：

this.$destroy() //销毁了当前的student组件的实例，销毁后所有student实例的自定义事件全都不奏效

小技巧:给组件绑定点击事件

<Student @click.native="回调函数"></Student>

全局事件总线(任意组件间通信) $bus

1.安装全局事件总线 main.js

...
new Vue({
  render: h => h(App),
  beforeCreate() {
  	Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm
  }
}).$mount('#app')

2.谁收数据就给给谁绑定
app.vue

mounted(){
	this.$bus.$on('名字'，执行的函数this.xxx 或者用箭头函数()=>{})
}

3.谁发数据，谁就去调用bus上面的函数
item.vue

this.$bus.$emit('名字',参数)

消息的订阅与发布 实现任意之间组件通信

1.安装插件 pubsub.js
npm i pubsub-js

2.引入pubsub
import pubsub from ‘pubsub-js’

3.谁收消息，谁订阅消息 谁订阅消息，谁去销毁消息

this.pubId =  pubsub.subscribe('hello',这也是要用箭头函数 或者使用this.提前定义好的函数 ，不然this为undefined(第一个参数为订阅消息的名字msgName,接收的消息值data)=>{})

beforeDestroy(){
	pubshub.unsubscribe(this.pubId )
}

4.谁发送数据，谁发布消息

pubsub.publish('hello',要传递的数据)

每天一点小知识！！！！