vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

看了很多文章，官网文档也有看，对父子组件通信说的不是很明白；决定自己总结一下；

vue一般都使用构建工具构建项目；这样每个组件都是单文件组件；而网上很多文章都是script标签方式映入vue，组件通信也是在一个文件中进行；

单文件组件形成的父子关系组件之间的通信的文章还没看到 。看到掘金和博客园的两篇文章决定自己写一个单文件组件之间通信

一般来说想比较少的数据可以通过事件发射和属性传递来形成数据的传递。

下面上代码；

1：父到子组件通信

//父组件通过标签上面定义传值
<template>
    <Main :obj="data"></Main>  //这个是子组件  绑定属性
</template>
<script>
    //引入子组件
    import Main form "./main"

    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子组件传递数据"
            }
        },
        //初始化组件
        components:{
            Main
        }
    }
</script>

//子组件通过props方法来接收数据  这里props可以写成对象形式
props:{
       type:'' //规定传递值的类型
       default:''  //默认值
}

<template>
    <div>{{data}}</div>  //这是父组件传递过来的数据
</template>
<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }
</script>

2：子组件到父组件

//子组件 Child
<template>
      <button @click='sendmsg'>sendmsg</button>  //子组件绑定事件

</template>

<script>

export default {
  data(){
       return {
            info:'this is a msg'   //这是需要传递的数据
        }
    },
  methods:{
         sendmsg(){
               this.$emit('info',this.info); //发射info事件
           }
    }
}
</script>

//父组件

<template>
  <div>
         <Child @info='get'></Child>    //监听子组件emit过来的事件
     </div>
</template>

<script>
import Child from './child'

export default {
  data(){return {
    msgPrent:'hellos'
}},
  methods:{
      get(msg){
            this.msgPrent = msg
       }
    }

}
</script>

　　

参考文章链接：

https://www.cnblogs.com/yesyes/p/6619082.html

https://juejin.im/post/5aa00229f265da239b40fc02

https://blog.csdn.net/heartandthink/article/details/74558073

总结:vue的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。  
      1:父组件向子组件传递数据:  
              在vue中,可以使用props向子组件传递数据  
        1): 子组件在props中创建一个属性,用于接收父组件传过来的值  
        2): 父组件中注册子组件  
        3): 在子组件标签中添加子组件props中创建的属性  
        4): 把需要传给子组件的值赋给该属性  
          
      2:子组件向父组件传递数据:  
              子组件主要通过事件传递数据给父组件  
        1):子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件  
        2):将需要传的值作为$emit的第二个参数,该值将作为实参传给相应自定义事件的方法  
        3):在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听  
          
      3:子组件向子组件传递数据  
        vue没有直接子组件对子组件传参的方法,建议将需要传递数据的子组件，都合并为一个组件.  
         如果一定需要子组件对子组件传参,可以先传到父组件,再传到子组件，为了便于开发,vue推出了一个状态管理工具vuex，  
         可以很方便的实现组件之间的参数传递。