vue视频教程系列第十七节-父子组件主动获取数据和方法

vue视频教程系列第十七节-父子组件主动获取数据和方法

前两节课我们主要讲了父子组件是如何互相传递数据和方法的。这种方式是一种被动方式。有没有一种主动方式，父子组主动向对方索要数据和方法呢？答案当然是有的。这节课我们就来介绍一下。

首先来介绍一下父组件主动获取子组件的数据和方法。在开始之前呢，我们需要了解一下ref属性。什么是ref呢？

ref是用来给元素或子组件注册引用信息的，引用的信息将会注册在父组件的$ref对象上。如果用在普通的DOM元素上，引用指向的就是DOM元素，如果用在子组件上，引用就指向子组件实例。

来个小实例吧。在input上设置ref属性，点击button，console出这个值，看看是什么。

html部分：

<div>

       <input ref="name" type="" name="">

     </div>

     <div>

       <button class="button" @click="run">点我</button>

     </div>

js部分：

methods: {

      run () {

        console.log(this.$refs.name)

      }

    }

运行后，console出来的内容是：

这是dom元素啦，如同我们在js里操作DOM元素一样的--domcument.getElementById()

所以说，这是操作DOM元素的一种方式。

我们在介绍ref时也说了这个属性是可以放在子组件上的。下面我们试下。

我们在子组件的js部分为以下内容：

data () {

      return {

         msg: "这是子组件"

      }

  }

在父组件里，html部分为：

<div>

       <counter ref="counter"></counter>

     </div>

<div>

       <button class="button" @click="run">点我</button>

     </div>

js里的Methods里为：

methods: {

      run () {

        console.log(this.$refs.counter.msg)

      }

    }

我们看到了什么？是不是将子组件里的msg里的数据取出来了？不知不觉中，父组件已经主动拿到了子组件的数据了！就是这样简单。

获取子组件的方法也是这样。总结一下父组件主动获取子组件的数据和方法的步骤：

1.  在子组件的标签上设置ref属性

 2.  在js部分用this.$refs.ref属性值.数据名（方法）获取

下面是子组件向父组件主动获取数据和方法，这个相对来说更简单一些。

在父组件的js部分如下：

data() {

        return {

           msg: "这是父组件的数据"

        }

    },

    methods: {

      run () {

        alert("这是父组件")

      }

    }

子组件里设置一个触发事件上：

<div>

        <button class="button" @click="sonrun"></button>

</div>

js部分：

methods: {

     sonrun () {

       this.$parent.msg //获取父组件的msg数据

       this.$parent.run() //获取父组件的run方法

     }

  }

以上。

欢迎关注微信群：duzhan2018