获取原生DOM
给标签或组件 添加ref属性
<div ref='alex'></div>
<p ref='a'></p>
<Home ref='b'></Home>
this.$refs.alex // 获取原生的Dom对象
this.$refs.b // 获取的是组件的实例化对象refs属性集合
console.log(this.$refs.input); // 获取原生DOM
// 返回值 <input type="text">
this.$refs.input.focus(); // 操作原生dom
// 原生dom进行获取焦点操作 focus js方法获取焦点
console.log(this.$refs.abc); // 获取abc组件实例对象
// VueComponent?{_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent,?…}
// 获取abc子组件的父组件，这里就是当前组件
console.log(this.$refs.abc.$parent); // 获取父组件
// 获取abc组件的根组件，也就是原始Vue
console.log(this.$refs.abc.$root); // 获取最原始的Vue 根
// 获取当前组件的子组件，是个列表集合
console.log(this.$children); // 获取儿子组件一个测试例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="../vue.js"></script>
<script>
Vue.component('Test', {
data: function () {
return {}
},
template: `
<div>我是测试组件</div>
`
});
Vue.component('Test2', {
data: function () {
return {}
},
template: `
<div>我是测试组件2</div>
`
});
let App = {
data: function () {
return {}
},
template: `
<div>
<input type="text" ref="input">
<Test ref="abc"/>
<Test2 ref="efg"/>
</div>
`,
mounted: function () {
console.log(this.$refs.input); // 获取原生DOM
// 原生dom进行获取焦点操作 focus js方法获取焦点
this.$refs.input.focus();
console.log(this.$refs.abc); // 获取abc组件实例对象
console.log(this.$refs.abc.$parent); // 获取父组件
console.log(this.$refs.abc.$root); // 获取最原始的Vue 根
console.log(this.$children) // 获取儿子组件
// for (let key in this.$refs){
// console.log(this.$refs[key]);
// }
}
};
let vm = new Vue({
el: '#app',
data: function () {
return {}
},
template: `
<App />
`,
components: {
App
}
});
</script>
</body>
</html>原文地址：https://www.cnblogs.com/Hybb/p/12109124.html
时间： 2024-08-30 03:02:46