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
