【Vue】何为 $parent ?它的使用场景是什么?
何为 $parent ?$ 是什么?首先 一般默认的来说,我们带$符号的我们基本默认是 vue 实例对象身上的也就是 vue 中的 this,我们可以 console 一下 this$parent 简介官方介绍:$parent:当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己$parent 既 可 以 接 受 父 组 件 数 据 , 又 可 以 修 改 父 组 件 数 据,
·
何为 $parent ?
$ 是什么?
首先 一般默认的来说,我们带 $ 符号的我们基本默认是 vue 实例对象身上的也就是 vue 中的 this,我们可以 console 一下 this
$parent 简介
官方介绍:
$parent:当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己
- $parent 既 可 以 接 受 父 组 件 数 据 , 又 可 以 修 改 父 组 件 数 据, 是 双 向 的
- $parent 可以调用父组件的方法
使用场景
子组件发生某个事件,在事件执行的方法中,需要访问或者更改父组件数据属性或调用父组件方法,此时用$parent【 该属性不常使用 】
<div id="app">
<cpn></cpn>
</div>
<template id="tem">
<div>
<p>我是子组件</p>
<button @click="btnclick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
name:'xixixi'
},
methods:{
parentPrint(){
console.log("父组件方法");
}
},
components:{
cpn:{
template:'#tem',
methods:{
btnclick(){
//获取父组件name值
console.log(this.$parent.name);
//修改父组件name值
this.$parent.name ="ssss";
this.$parent.parentPrint();
}
}
}
}
});
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)