vue中父组件调用子组件

在vue中父组件操作子组件通常会用ref这个特性，结合文档我们来看下ref有哪些用法：

官方定义：

ref被用来给元素或者子组件注册引用信息。

换句话讲就是vue留了一个操作 原生dom元素 或操作 子组件实例 的接口；当ref定义在元素或组件上，元素或组件信息会被注册在实例中的$refs对象上。

用在元素上：

（1）操作单个dom元素

  <div id="app">
     <p ref='p'></p>
   </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name:"lxc"
        },
        mounted(){
          console.log(this.$refs.p) // <p></p>
        }
    })
</script>

（2）当for循环和ref一起用在元素上时, 元素将会以数组的形式注册在实例中的$refs对象上

  <div id="app">
     <p ref='p' v-for="item in d" :key="item.id">{{item.name}}</p>
   </div>
<script>
    var vm = new Vue({
        el: "#app",
        data(){
            return {
                d:[{name:"l",id:'1'},{name:'x',id:'2'},{name:'c',id:'3'}]
            }
        },
        mounted(){
          console.log(this.$refs.p) // [p,p,p]
        }
    })
</script>

用在子组件上：

父组件操作子组件的方法或者数据

//子组件
var son = {
        template:`
          <div> 
             <h1 v-show="isShow">子组件</h1>
          </div>
        `,
        data(){
            return{
                isShow:true
            }
        },
        method:{
            fn(){
                this.isShow = false
            }
        }
    }

<!-- 父组件 -->
 <div id="app">
   <son ref='son'></son>
 </div>

<script>
var vm = new Vue({
        el: "#app",
        data(){
            return {
                // d:[{name:"l",id:'1'},{name:'x',id:'2'},{name:'c',id:'3'}]
            }
        },
        mounted(){
            this.$refs.son.fn()
        },
        components:{
            son
        }
    })
</script>

 

操作时机

因为ref是用来操作dom或组件的，所以需要dom或组件渲染完毕之后才可以进行操作，通常会把操作dom放在mounted钩子函数中，如果想在渲染完毕之前操作dom，那你应该放到vm.$nextTick中。