<!--отецкомпоненты-->
<template>
  <div id="app">
    <child-compoment :data="data"></child-compoment>  
  </div>
</template>
<script>
import child-compoment from './components/children.vue'

export default {
  name: 'App',
  components: {
    child-compoment
  },
  data:function(){
    return {
        data:"hello world"
    }
  }
</script>

<!--ребеноккомпоненты-->
<template>
    <div class="content">
        {{data}}
    </div>
</template>
<script>
export default{
    name : "child-compoment",
    props:{
        data:String
    }
}
</script>

<!--отецкомпоненты-->
<template>
<div id="app">
    <children-compoment @jump="getinfo"></children-compoment>
    <p>
        {{msg}}
    </p>
    </div>
</template>
<script>
import child-compoment from './components/children.vue'

export default {
  name: 'App',
  components: {
    "child-compoment"
  },
  data:function{
    return{
        msg : ""
    }
  }
  methods:{
    getinfo:function(value){
        this.msg = value
    }
  }
</script>

<!--ребеноккомпоненты-->
<template>
    <div class="content">
        <button @click="jump">
            Нажмите меня, чтобы передать значение
        </button>
    </div>
</template>

<script>
export default{
    name:"children-compoment",
    methods:{
        click:function(){
            this.$emit('прыжок', "переданное значение")
        }
    }
}
</script>