Vue之ref详解与实例 原
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。ref可以用在普通的Dom元素上，也可以用在父级组件上，还可以用在子组件上，通过this.$refs对象访问，
一、加在普通DOM元素上，引用指向的就是DOM元素：
<body class="">
<div id="example1">
<input type="text" ref="input" id="inputId"/>
<button @click="add">添加</button>
</div>
<script src="../js/vue.js"></script>
<script >
var example1=new Vue({
el:"#example1",
methods:{
add:function(){
this.$refs.input.value = "22";
console.log(this.$refs.input); //显示<input type="text" id="inputId"/>
console.log(document.getElementById("inputId"))//显示<input type="text" id="inputId"/>
}
}
})
</script>
</body>下面的例子实现的功能是页面打开input聚焦。
二、ref加在父级上
<body class="">
<div id="example">
<base-input ref="usernameInput"></base-input>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component('base-input', {
data: function() {
return {
initValue: "hi"
}
},
template: '<input type="text" v-bind:value="initValue">'
})
var app7 = new Vue({
el: "#example",
mounted: function() {
console.log(this.$refs.usernameInput.$el)
this.$refs.usernameInput.$el.focus()
//this.$refs.usernameInput 指向子组件的实例
}
})
</script>
</body>三、ref加在子组件上
<body class="">
<div id="example">
<base-input ref="usernameInput"></base-input>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component('base-input', {
data: function() {
return {
initValue: "hi"
}
},
mounted: function() {
this.$refs.input.focus()
},
template: '<input type="text" ref="input" v-bind:value="initValue">'
})
var app7 = new Vue({
el: "#example",
})
</script>
</body>四、父组件与子组件都有ref的情况
<body class="">
<div id="example">
<base-input ref="usernameInput" v-on:click.native="focus1"></base-input>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component('base-input', {
data: function() {
return {
initValue: "hi"
}
},
methods: {
//用来从父级组件定义方法
focus: function() {
alert("innerhi")
this.$refs.input.focus(); //并不执行聚焦，父组件的mounted执行聚焦
}
},
template: '<input type="text" ref="input" v-bind:value="initValue">'
})
var app7 = new Vue({
el: "#example",
methods: {
focus1: function() {
alert("hi")
var val = this.$refs.usernameInput.focus();
//alert(val);
alert("you clicked me");
}
},
mounted: function() {
console.log(this.$refs.usernameInput)
this.$refs.usernameInput.focus()
}
})
//只有在子组件中的方法中定义focus事件并有this.$refs.input.focus();代码，父组件才通过this.$refs.usernameInput.focus()代码聚焦
</script>
</body>总结：ref主要用在特殊的情况下获取元素。如果ref只加到父组件上，this.$refs.usernameInput.$el.focus() 一定要加$el。
公众号：前端之攻略
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/07/23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
