vue中父组件调用子组件

原创

红旗下的小兵 2019-08-10 15:35:59 博主文章分类：vue ©著作权

文章标签 for循环数据钩子函数 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者红旗下的小兵的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

官方定义：

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

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

vue中父组件调用子组件_数据

用在元素上：

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