Vue的$parent详解
$parent 官方介绍： 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。 既然可以获取到组件的实例，那么就可以调用组件的属性或是方法进行操作
$parent表示父组件的实例，该属性只读
下面是一个简易实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="example"> <parent-component></parent-component> </div> <template id="parent-component"> <div class="parent"> <h3>我是父组件</h3> <input v-model="parentMsg"> <p>{{parentMsg}}</p> <child-component></child-component> </div> </template> <template id="child-component"> <div class="child"> <h3>我是子组件</h3> <p>{{msg}}</p> <button v-on:click="showData">显示父组件数据</button> </div> </template> </body> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js" type="text/javascript"></script> <script> // 注册 Vue.component('parent-component', { template: '#parent-component', data(){ return{ parentMsg:'我是父组件的数据' } }, components:{ 'child-component':{ template:'#child-component', data(){ return{ msg:'' } }, methods:{ showData(){ this.msg = this.$parent.parentMsg; } } } } }) // 创建根实例 new Vue({ el: '#example' }) </script> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知