1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/8022.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: