以下代码为综合了今天学习的vue注册全局组件以及子组件调用父组件方法并修改数据

1：html部分

   <div id="app">
        <xu @godesth="godesth" :textVal="value"></xu>
    </div>

绑定vue对象中的godesth方法，并v-bind绑定textVal属性接收来自父组件中的value值

2：在创建vue对象之前，首先声明需要全局注册的组件（这是一个小坑，全局注册组件在代码顺序上必须放在vue实例之前）

Vue.component('xu',{
        props:['textVal'],
        template: '<div><p>{ {textVal} }</p><button v-on:click="goChange()">点击改变数字的值</button></div>',
        methods:{
            goChange(){
                this.$emit('godesth');
            }
        }
    })

上述template模板中，props接收textVal值，点击是触发goChange()方法，而goChange()方法中，使用$emit来触发父组件中的godesth方法

3：创建vue对象实例，绑定html元素

 var vm = new Vue({
        el: '#app',
        data: {
           value : "1",
        },
        methods:{
            godesth(){
                this.value ++;
                console.log('value:'+ this.value )
            }
        }
    })

当点击子组件的按钮时，会触发godesth方法，使value++；同时打印出value的值

心得总结

刚接触到vue的组件来回调用数据的时候确实很迷惑，但是在写了这段代码之后，帮助理解了父子组件中的数据传递和方法调用，有点东西有点东西