vue-使用ref属性获取和操作dom元素

前面也提到过，Vue是不提倡用原生js或者第三方库【jquery】去获取并操作dom元素的。但是这种需求不可避免，Vue官网提供了一个ref属性，用于我们在自定义方法中去获取具有这个ref属性的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<style>

</style>

<body>
    <div id="app">
        <h3 ref='thish3'>这是一个h3标签</h3>
        <hr>
        <template1 ref='mycom'> //模板也可以标记ref，然后获取到

        </template1>
        <input type="button" value="获取dom元素或组件" @click='getelement'>

    </div>
    <!-- 注意，组件也可以被$refs引用 -->

</body>
<script>
    let template1 = {
        template: '<h1>这是h1</h1>',
        data: function() {
            return {
                id: 1,
                val: 'hhh'
            }
        },
        methods: {
            myfunc() {
                console.log('这是一个方法')
            }
        }
    }
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            getelement() {
                console.log(this.$refs.mycom.val);//调用组件里的val
                this.$refs.mycom.myfunc() //引用组建后，可以使用$refs.引用组件时设置的ref属性.组件内容来获取被引用组件的数据和函数
            }
        },
        components: {
            template1
        }
    })
</script>

</html>

View Code

　　可以看到，这个ref属性非常强大，只要加上ref属性，就可以在Vue实例通过$refs获取到，父组件就可以轻松的得到子组件里面的内容【$emit('func_name',{}),通过触发父组件里的方法，然后传值到方法中的这种方式明显就繁琐而且多个数据的传递还需要经过-压入到一个对象中的这种处理才能传递】。

vue-使用ref属性获取和操作dom元素

总结：ref既可以获取到页面上的元素，又可以获取现成组件中的私有数据和方法！！！