Vue的ref和$refs
ref-----String
ref用来给DOM元素和子组件注册引用信息,这些引用信息将存放在在父组件的$refs对象上。如果是在一个DOM元素注册,则是引用DOM元素,即获得DOM元素。如果是在一个子组件注册,则是引用组件实例,即可以利用这点来获取子组件的数据对象或者是调用子组件的方法。
$refs-------Object
存有注册ref的子组件
- 因为首先要有元素或者组件才有ref,所以在渲染之前是取不到ref的,只有在渲染之后才取到。
- 可以利用this.$refs.name取得实例,那就可以调用方法和取得数据对象
- 如果是v-for和ref一起使用的话,获得的是一个数组
具体查看
created: function () {
console.log(this.$refs.into); underfined
}
mounted: function () {
// console.log(this.$refs.into); <div>我是入口组件</div>
console.log(this.$refs.son); son实例
}
Vue.component('son', {
template: `<div>
<div ref='da'>我是儿子</div>
<button @click='input2'>用来触发父组件方法</button>
<button @click='input'>在组件声明的地方使用ref</button>
</div>`,
data: function () {
return {
msg: '黄丹妮最美'
}
},
methods: {
/*在子组件使用this.$refs也可以*/
input() {
console.log(this.$refs.da);
},
/*父组件调用子组件的方法*/
input1() {
alert('被调用了');
},
/*子组件调用父亲方法*/
input2() {
this.$emit('Father');
}
}
})
/*ref的用法*/
var APP = {
template: `<div>
<div ref='into'>我是入口组件</div>
<son ref='son' @Father='input4' />
<button @click='input2'>我想调用子组件的方法</button>
<button @click='input3'>我想打印子组件中的data</button>
</div>`,
data: function () {
return {
}
},
/*created: function () {
console.log(this.$refs.into);
}*/
mounted: function () {
// console.log(this.$refs.into); <div>我是入口组件</div>
console.log(this.$refs.son); // son实例
},
methods: {
/*调用子组件的方法*/
input2() {
this.$refs.son.input1();
},
/*取得子组件的数据对象*/
input3() {
console.log(this.$refs.son.msg);
},
/*父组件被调用后触发的方法*/
input4() {
console.log('黄丹妮最可爱');
}
}
}
new Vue({
el: '#app',
template: '<APP />',
data: function () {
return {
}
},
components: {
APP
}
})