vue组件通信---子传父(props方式)

描述：

1.父组件中定义函数，并将函数传递给子组件

2.子组件中调用函数，并将自己的数据作为参数传递给父组件的函数

实现步骤： 

1.在子组件标签上使用v-bind绑定要传递的参数名以及传递的函数

2.子组件props中接收参数名

3.在子组件中调用其他函数来触发 props接收的参数（参数为函数）

4.子组件的参数被传递出去

 父组件parent.vue代码如下：

 <template>
   <div class="parent">
     <son :famsg="getmsg"></son> //子组件绑定famsg变量
   </div>
 </template>
 <script>
 import son from './son' //引入子组件
 export default {
   name: 'parent',
   components:{son},     //使用子组件
   data () {
     return {
       
     }
   },
   methods:{
    getmsg(sonMsg){
      console.log('子组件中传回的参数',sonMsg);
    }
   },
 }
 </script>

子组件son.vue代码如下： 

 <template>
   <div class="son">
      <button @click="sendmsg">sendmsg</button>
   </div>
 </template>
 <script>
 export default {
   name: 'son',
   props:[ 'famsg' ],
   data () {
     return {
       sonMsg: '我是子组件要传的参数',
     }
   },
   methods: {
      sendmsg(){
        return this.famsg(this.sonMsg) //返回父组件的方法并携带子组件的参数
      }
   },
 }
 </script>