Vue组件间通信的几种方式

写在前面：

在谈组件间通信时，一定要先明白一件事，就是我们前端就是在合适的时候通过合适的方法获取数据，再把数据展示在合适的位置。所以组件间通信是在大型项目开发过程中基础的基础，最最重要的东西。

一：传统方式的组件传值

1.父组件给子组件传值（通过props的方式）

1-在父组件的子标签中动态绑定需要传递的值 如 ：todos=“todos”
2-在子组件中通过props接收父组件传递过来的数据 如下 props:[ ’ todos ’ ]
3-然后子组件中就可以直接使用父组件传递过来的数据了。

//父组件
<template>
  <div>
      <son :todos="todos"></son>
  </div>
</template>

<script>
    import Son from './components/Son'
    export default {
   
      name:'App',
      components:{
   Son},
      data(){
   
        return{
   
          todos:[
            {
   id:'0001',title:'吃饭',done:true},
            {
   id:'0002',title:'睡觉',done:false},
            {
   id:'0003',title:'打代码',done:true}
          ]
        }
      }
  }
</script>

//子组件
<template>
    <div v-for="todoObj in todos">
        {
   {
   todoObj}}
    </div>
</template>

<script>
    export default {
   
       name:'Son',
       props:['todos']
    }
</script>

2.子组件给父组件传值（通过调用函数传递参数）

1-父组件中写一个方法:fun1()，并动态绑定到父组件中的子组件标签上（即父组件为子组件传递一个方法fun1()）。
2-在子组件中通过props接收父组件传过来的方法fun1()。
3-在子组件中写一个方法:fun2()，当该方法被触发时，在该方法中调用fun1(),并将想要给父组件传递的数据以fun1的参数的形式传过去。
4-在父组件的方法fun1中接收子组件传递过来的参数并使用。

//父组件
<template>
  <div>
      //addTodo为绑定的方法
      <son :addTodo="addTodo"></son>
  </div>
</template>

<script>
    import Son from './components/Son'
    export default {
   
      name:'App',
      components:{
   Son},
      data(){
   
        return{
   
          todos:[
            {
   id:'0001',title:'吃饭',done:true},
            {
   id:'0002',title:'睡觉',done:false}
          ]
        }
      },
      methods:{
   
        //添加一个todo对象，todoObj为接收的子组件传过来的数据
        addTodo(todoObj){
   
          this.todos.unshift(todoObj)
        },      
      }
  }
</script>