Vue中子组件给父组件传值的方式（新手入门）

子组件给父组件传值的三种方式;

<!--方式一：
通过父组件给子组件传递函数类型的props实现，子给父传递数据  a=>App-->
    <myA :getA="getA"/>

       1.父组件定义函数给子组件传递
App:   getA(name){
          console.log('App收到了a的信息',name);
        },


       1.子组件接收函数
a:     props:['getA'],
       <button @click="sendAname">把a名字给App</button>
       2.调用父组件的函数并传值
       methods:{
           sendAname(){
             this.getA(this.name);
           }
         }

//=======一下是自定义事件的两种方式

<!--方式二：
通过自定义事件b组件给App传递数据 b=>App-->
<!--给b组件vc实例对象绑定自定义事件-->

    <myB @chuandi="getB"/>

App:父组件给子组件绑定自定义事件
   //定义函数
    getB(name){
          console.log('自定义事件拿到b信息',name)
        }

b:  <button @click="sendBname">把b名字给App</button>
    1.子组件要触发事件
     sendBname(){
          //触发b绑定的自定义事件
          this.$emit('chuandi',this.name);
        }

<!--方式三：
  通过ref-->

    <myB ref="b"/>

       //1.定义函数
 App： getB(name){
           console.log('自定义事件拿到b信息',name)
         },

       //加载完毕，钩子函数
       mounted() {
       //绑定一个自定义事件，把函数传递过去
        this.$refs.b.$on('chuandi',this.getB);
       }


b:  <button @click="sendBname">把b名字给App</button>
    1.子组件要触发事件
     sendBname(){
          //触发b绑定的自定义事件
          this.$emit('chuandi',this.name);
        }