组件通信 $ref
(1)放在dom上表示获取当前dom元素,
(2)放到组件上表示获取当前组件实例
(3)在v-for中获取的是集合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>组件通信 ref</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <parent ref="parent"></parent> </div> </body> <script> Vue.component('parent',{ template:`<div><span v-if="isShow">hello world</span></div>`, data() { return { isShow:false } }, methods: { Show() { this.isShow = true; } }, }) let vm = new Vue({ el:'#app', mounted() { // console.log(this.$refs.parent.Show()) setTimeout(()=>{ this.$refs.parent.Show() },2000) }, }) //hello </script> </html>
越努力越幸运