vue父子组件传值

vue中组件的嵌套数值传递一直不是很清晰，今天理清下思路。

1、在页面中有一个父组件的模板。

从父传给子的数值：我是父亲
我是子组件

<template>//父组件
  <div>
    <div>
      <son :fatherdata="name" @getdata="getdataval"></son>  //子组件    //1.1      //2.2    
      {{sondata}}   //2.4
    </div>
  </div>
</template>
<script>
 import son from './Son.vue' //引入子组件

 export default{
    data(){ 
     return(){ 
      name:'我是父亲',
       sondata:''    //2.4
         } 
       },
      components:{   //引入子组件
        　son
       },
       methods:{
          getdataval(data){           //2.3
            this.sondata=data      //2.4
            }
          }

  }
</script>

新起一个页面Son.vue
<template>//子组件
  <div>
    <div>
         <h1>从父传给子的数值：{{fatherdata}}</h1>  //1.3
         <button @click="send">将数据传递给父</button>  //2.1
    </div>
  </div>
</template>
<script>
 export default{
    data(){ 
     return(){ 
       message：'我是子组件'
         } 
       },
      props:['fatherdata'],//1.2
      methods:{
       send(){
         this.$emit('getdata',this.message)   //2.1
         }
       }
         
  }
</script>

1、父组件向子组件传值

        1、在子组件的标签里通过v-bind绑定一条属性，属性值为父组件的数据名称。

        2、在子组件的模板中利用props属性把已经绑定的属性值写进去。

        3、在子组件的template中就可以使用这个数据了。

2、子组件向父组件传值（使用自定义事件）

       1、在发数据组件的methods里定义一个方法，方法中使用如下：this.$emit('event',value)。其中event是自定义事件名，value是要传递的数据。

        2、在发数据组件的标签里  @自定义事件名称=“函数名” 。

        3、在接收组件的methods里，函数名(val){val}  。其中val就是接收的数据了。

        4、在接收组件中声明值，就可以正常调用