component -- 父組件操作子組件 · Vue&&TypeSprict--基礎總結

>[success] # 父組件操控子組件 ~~~ 1.上面的案例講解了父傳子，將組件的一些內容傳遞到子組件，進行控制操作 2.講到了子傳父，子組件通過變相控制父組件方法，進而控制父組件 3.這個案例講解如何父組件控制子組件 ~~~ >[danger] ##### 案例 -- 加載顯示等待圖案 ~~~ 1.我們可以吧ajax 請求時候加載的等待內容做成子組件 2.在父組件ajax 請求完畢后控制子組件進行隱藏 3.這里面給子組件加了ref，父組件去調用儲存的ref，其實拿到的是整個，子組件的Vue實例，因此可以變相的控制子組件的內容 4.在要獲取的標簽上備注ref 自定義屬性 5.通過this.$refs.屬性名稱獲取 6.利用this.$ref 也可以獲取到對應子組件的data 和 methods 里面的屬性和方法 7.需要注意的是： 7.1.如果你把它作用到普通 HTML 標簽上，則獲取到的是 DOM 7.2.如果你把它作用到組件標簽上，則獲取到的是組件實例 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <com ref="loading"></com> </div> <template id="com"> <div> <h4 v-show="showLoad">加載中....</h4> </div> </template> <script type="text/javascript"> let com = { template:'#com', data(){ return{ showLoad:true } } }; var vm = new Vue({ el: "#app", data: { }, methods:{ showHandel(){ this.$refs.loading.showLoad = false; } }, components: { com, }, // 模擬ajax mounted(){ setTimeout(()=>{ this.showHandel(); },2000) }, }) </script> </body> </html> ~~~