SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('childcom',{
            props:['name'],
            template:`<div>
                <div>我是子组件   {{name}}</div>
                <grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
            </div>`,
           
            components: {
                'grandcom':{
                    template:`<div>
													我是孙子组件-------
													<button @click="grandchangename">改变名字</button>
 													<ggrandcom v-bind="$attrs" v-on="$listeners"></ggrandcom>
												</div>`,
                    components: {
                          'ggrandcom':{
                              template:`<div>
                                    我是孙孙子组件-------
																				{{$attrs}}
                                  </div>`,
                              methods:{
                                  grandchangename(){
                                     this.$emit('testchangename','kkkkkk')
                                  }
                              }
                          }
                      },
                    methods:{
                        grandchangename(){
                           this.$emit('testchangename','kkkkkk')
                        }
                    }
                }
            },
       
        })


var app = new Vue({
  el: '#app',
  data(){
      return {
          'name':'张三',
          'age':'30',
          'sex':'男'
      }
    },
    methods:{
      changename(val){
        console.log('val')
          this.name = val
      }
  }
})
<div id="app">
  <childcom :name="name" :age="age" :sex="sex" @testchangename="changename"></childcom>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>