目录
组件之间的的通信,除了props, 事件总线,事件机制( $on(eventName),$emit(eventName) ),还有Ref
例如,一个输入框input,我们要拿到它的值,有几种方法呢?
最简单的就是v-model,数据双向绑定,这里就不具体展开说了,着重讲一讲ref,那么这个ref该怎么使用呢?
1.ref 放在标签上
<div id="app">
<input type="text" ref="inputText"/>
<button @click="handle()">按钮</button>
</div>
var vm = new Vue({
el:'#app',
methods:{
handle(){
console.log(this.$refs)
}
}
});
看看打印的$refs,其实就是拿到inpu这个dom节点了,那么拿到它的值,应该也很简单了,ref="inputText" 其实就是做了个标记,我们可以直接拿到它所标记的标签的dom节点
.value就可以拿到值了
handle(){
console.log(this.$refs.inputText.value)
}
2.ref放在组件上
<body>
<div id="app">
<input type="text" ref="inputText"/>
<button @click="handle()">按钮</button>
<my-child ref="childComponent"></my-child>
</div>
<script type="text/javascript">
//子组件
Vue.component('my-child',{
template:`
<div>
child组件
</div>
`,
methods:{
childHandle(value){
console.log(value)
}
}
})
var vm = new Vue({
el:'#app',
methods:{
handle(){
// console.log(this.$refs.inputText.value)
console.log(this.$refs)
}
}
});
</script>
</body>
看打印出来的,里面有两个,都是ref标记了的,一个是标签,一个是我们的子组件,那么现在我们要拿子组件里面的值,或者把值传给子组件该怎么操作呢?
1.拿子组件中的值
<script type="text/javascript">
//子组件
Vue.component('my-child',{
template:`
<div>
child组件
</div>
`,
data(){
return {
title:'我是子组件'
}
},
methods:{
childHandle(value){
console.log(value)
}
}
})
var vm = new Vue({
el:'#app',
methods:{
handle(){
// console.log(this.$refs.inputText.value)
console.log(this.$refs.childComponent.title)
}
}
});
</script>
2.传值给子组件
这就是通过ref实现组件间的通信,是不是很简单啊!
3.总结
- ref放在标签上,拿到的是原生节点
- ref放在组件上,拿到的是组件对象,组件的所有属性,和方法都可以拿到,那么父组件可以拿到子组件的属性,和方法,都不需要子传父了。