父子间引用子组件用的比较多,子组件引用父组件用的相对较少。子组件引用父组件使用$parent。
如下所示,子组件中的按钮绑定点击事件,弹出显示父组件的title属性。
<div id="app">
<mycpn></mycpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
<div>
<h2>{{title}}</h2>
<button @click="btnclick">子组件按钮</button>
</div>
</template>
<script>
//相当于vue的子组件
const mycpn={
template:'#cpn',
data(){
return {
title: '我是子组件'
}
},
methods:{
btnclick(){
//弹出显示父组件中的title
alert(this.$parent.title);
}
}
}
//创建并注册组件
Vue.component('mycpn',mycpn);
//vue相当于父组件
const vue = new Vue({
el:"#app",
data:{
title:"我是父组件"
},
components:{
mycpn:mycpn
}
});
</script>
效果如下:
如果嵌套了多层子组件,子组件可以用$root引用最外层的父组件,即根组件。