Vue之组件之间的通信

参考文章： https://segmentfault.com/a/1190000019208626

前言

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
这里以props的方式接收组件之间的通信

一、父组件向子组件进行通信

App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

注意 <users v-bind:users="users"></users>
这里是父组件向子组件进行传users中的值

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

注意

props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }

这里是子组件接收父组件中传的值
如果不注重约束的话，也可以写成一下方式

prop:['users']

传递函数也是同样的方式

二、子组件向父组件传值

子组件向父组件传值的方式是通过父组件定义一个函数，然后父组件将函数传给子组件，子组件用这个函数将值传递到父组件

todos: [
  			{id:'001',title:'抽烟',done:true},
  			{id:'002',title:'喝酒',done:false},
  			{id:'003',title:'烫头',done:true}
  		]

以上是父组件原本的数据
这个例子是，子组件传值到父组件，增加todos中的数据

//父组件
<template>
			<MyHeader :addTodo="addTodo" ></MyHeader>
</template>

<script>
	import MyHeader from './components/MyHeader.vue'

export default {
  name: 'App',
  components: {
   MyHeader,
   MyFooter,
   List
  },
  data() {
  	return {
  		todos: [
  			{id:'001',title:'抽烟',done:true},
  			{id:'002',title:'喝酒',done:false},
  			{id:'003',title:'烫头',done:true}
  		]
  	}
  },
  methods: {
	  addTodo(todoObj){
		  this.todos.unshift(todoObj)  //添加对象到数组
		  
	  },
	
  }
}
</script>

注意<MyHeader :addTodo="addTodo" ></MyHeader>，父组件向子组件传入函数

//子组件
<template>

  <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/>

</template>

<script>
	import {nanoid} from 'nanoid'  //调用生成Id的函数
	export default {
		name:'MyHeader',
		methods:{
			add(e){
				//定义一个对象
				const todoObj = {
					id:nanoid(),
					title:e.target.value,
					done:false
				}
			//用父组件的函数添加一个对象到父组件的todos
				this.addTodo(todoObj)
			}
		},
		props:['addTodo'],  //接收App传过来的方法
		
	}
</script>

注意props:['addTodo']，接收父组件的函数，
在子组件的add()函数中用到了addTodo()函数

三、兄弟组件之间相互传值

兄弟组件之间相互传值本质是，一个子组件向父组件通信，再有父组件转交另一个子组件，就实现了兄弟之间的相互通信

其它的通信方式，可以参照以下的文章
参考文章：https://segmentfault.com/a/1190000019208626