Vue2与Vue3组件间通信方式总结

        我们都知道Vue作为一个轻量级的低门槛入门前端框架，其核心就是 组件化开发 。Vue就是由多个组件组建成的，组件化是它的精髓，更是它的强大之处。各组件实例之间是相互独立的，这也就意味着不同组件之间数据是无法相互共用。

        但实际项目开发中，我们时常需要其他组件的数据，为此诞生了组件通信的问题。针对组件之前的关系：父子、兄弟、子孙的不同选用的数据传输方式也不一样，今天就来做个总结。

Vue2组件通信

父组件向子组件传值

Props

• 父组件以属性的方式传值给子组件
• 子组件通过props方式接收数据

//在父组件中引入子组件并绑定fatherData自定义属性

<Son :fatherData="fatherData"></Son>

<script>
import Son from '@/components/son'
export default{ 
    name:'Father', 
    components:{Son},
    data(){
        return{ 
            fatherData:'我是父组件向子组件传递的值-props方式' 
        } 
    } 
}
</script>

在子组件中使用 props 接收父组件传递的数据，props 里的名字跟父组件定义的属性名一致

但是子组件内想要修改父组件传过来的值却不“污染”父组件的话，可以在子组件内定义一个变量mydata去接收fatherData数据，并使用 watch 监听fatherData数据的变更。

$emit()</