【ref属性】
ref属性，vue提供的，写在标签上
- 可以写在普通标签：在vue中使用 this.$refs.名字 拿到dom对象，可以原生操作
- 可以写在组件上:在vue中使用 this.$refs.名字 拿到[组件]对象，组件属性，方法直接使用即可
【详解】
- ref属性是Vue.js中提供的一种特殊属性，它可以用于在标签上进行设置。
- ref属性可以被用在普通HTML标签上，也可以被用在组件标签上。
- 当ref属性被应用在普通HTML标签上时，我们可以通过在Vue实例中使用
$refs来获取对应的DOM对象。 - 使用
this.$refs.名字可以获取到具体的DOM元素，然后可以通过原生的JavaScript方法对该DOM元素进行操作。 - 例如，可以通过
this.$refs.inputElement.value来获取一个input元素的值，或者通过this.$refs.buttonElement.click()来模拟点击一个按钮。
- 当ref属性被应用在普通HTML标签上时，我们可以通过在Vue实例中使用
- 当ref属性被应用在组件标签上时，我们可以通过在Vue实例中使用
$refs来获取对应的组件实例对象。- 使用
this.$refs.名字可以获取到对应的组件对象，然后可以直接使用该组件的属性和方法。 - 例如，如果组件具有名为
childComponent的ref属性，我们可以通过this.$refs.childComponent来访问该组件的属性和方法，如this.$refs.childComponent.propertyName或this.$refs.childComponent.methodName()。
- 使用
- 需要注意的是，在Vue.js中，使用ref属性是直接操作DOM或使用组件属性和方法的一种方式。
- 但是，理想情况下，我们应该避免直接操作DOM，而是通过数据驱动和组件间的通信来处理。
- 因此，在大多数情况下，使用ref属性来访问DOM元素或组件应该限制在非常特定的场景下，例如在需要进行特殊的DOM操作或与组件进行直接交互的情况下使用。
- 同时，为了更好地遵循Vue.js的设计原则，尽量在Vue组件中使用数据绑定和事件驱动的方式来实现功能，而不是通过ref属性直接操作DOM。
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>ref属性放在普通标签上</h1>
<input type="text" v-model="username" ref="myinput">
<br>
<img src="http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg" alt="" height="300px" ref="myimg">
<h1>ref放在组件上</h1>
<hr>
<lqz ref="mylqz"></lqz>
<hr>
<button @click="handleClick">点我执行函数</button>
<br>
{{username}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
handleClick() {
console.log(this.$refs)
// 通过key，取到标签，拿到原生dom，通过dom操作，控制标签
// this.$refs.myinput.value = 'lqz'
// this.$refs.myimg.src='https://img2.woyaogexing.com/2021/09/22/3c686eb61fe34696840c478584b73d36!400x400.jpeg'
// 放在组件上---》现在在父组件中，能拿到子组件对象，对象中的属性和方法直接用即可
console.log(this.$refs.mylqz)
// this.$refs.mylqz.title = 'sb'
// this.username=this.$refs.mylqz.title
this.$refs.mylqz.handleBack()
}
},
components: {
lqz: {
template: `
<div>
<button @click="handleBack">后退</button>
{{ title }}
<button>前进</button>
</div>`,
data() {
return {
title: "首页"
}
},
methods: {
handleBack() {
alert('后退了')
}
}
}
}
})
</script>
</html>