【8.0】Vue之ref属性

【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属性被应用在组件标签上时，我们可以通过在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>
posted @ 2023-08-06 22:30  Chimengmeng  阅读(307)  评论(0)  编辑  收藏  举报