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> ~~~