SOURCE

const app = new Vue({
    el: "#app",
    data: {
        message: "我是Vue标题"
    },
    components: {
        'my-cpn': {
            template: "#cpn",
            methods: {
                btnClick: function () {
                    alert(this.$parent.message)
                    //访问根组件还可以使用$root,根组件一般是Vue实例
                    //我们这里的parent就等于根组件
                    //alert(this.$root.message)
                }
            }
        }
    }
})

<div id="app" class="main">
	<h2>{{message}}</h2>
	<my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>

<script type="text/x-template" id="cpn">
	<div class="cpn">
		我是子组件
		<button @click="btnClick">点击</button>
	</div>
</script>

.main {
    width: 250px;
    height: 300px;
    border: 2px solid red;
}

.cpn {
    width: 120px;
    height: 50px;
    border: 2px solid green;
    margin: 10px
}