说说功能强大又好使的ref与$refs

最新推荐文章于 2024-03-06 08:00:00 发布

太想进步了

最新推荐文章于 2024-03-06 08:00:00 发布

阅读量322

点赞数

文章标签： ref vue

本文链接：https://blog.csdn.net/qq_44755188/article/details/107806097

版权

引入：

你知道的vue是不提倡直接操作DOM的那比如要DOM元素怎么办，绑定class属性，通过数据来控制class属性的变化是一种方法，那还可以用住粗ref来实现

获取DOM元素
修改DOM元素样式
获取子组件数据或者使用子组件方法
子组件也能获取到父组件的数据
获取兄弟组件数据

<body>
    <div id="app">
        父组件数据：{{msg}}
        <br>
        <input type="button" @click="change" value="点击触发">
        <p ref="text">过ref能变红吗？</p>
        <login ref="login"></login>
        <login2 ref="login2"></login2>
    </div>

</body>
<script>
    var login = {
        template: `<h1>子组件数据：{{msg}}</h1>`,
        data() {
            return {
                msg: "原来数据能被改吗",
                aa: "bad"
            }
        },
        methods: {
            getmsg(msg) {
                console.log(msg); //拿到父组件数据
            }
        }
    };
    var login2 = {
        template: `<h3>fddfdfd--{{msg}}</h3>`,
        data() {
            return {
                msg: "good"
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父组件能拿到子组件数据吗"
        },
        methods: {
            change() {
                this.$refs.text.style = "color :red"; //能改子组件样式
                this.$refs.login.getmsg(this.msg) //父组件数据传递给子组件
                this.msg = this.$refs.login.msg; //子组件数据传给父组件
                this.$refs.login.msg = "新数据"; //更改子组件数据
                this.$refs.login2.msg = this.$refs.login.aa; //更改兄弟组件数据
            }
        },
        components: {
            login,
            login2,
        }
    })
</script>

总结：

通过注册ref 就可以通过this.$ref 获取到DOM集合接下来就可以不用直接的操作DOM 就可以直接来改变DOM元素样式，以及获取到子组件数据，传递子组件数据等，所以父组件要获取子组件数据不仅仅可以用$emit()触发，更强大的是子组件也能获取父组件数据，不仅是靠props来获取，并且使用简单，起码比用props $emit()好理解，除此之外兄弟组件之间的数据也能获得，你说功能强大不强大

太想进步了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
说说功能强大又好使的ref与$refs

引入：你知道的vue是不提倡直接操作DOM的那比如要DOM元素怎么办，绑定class属性，通过数据来控制class属性的变化是一种方法，那还可以用住粗ref来实现获取DOM元素修改DOM元素样式获取子组件数据或者使用子组件方法子组件也能获取到父组件的数据获取兄弟组件数据<body> <div id="app"> 父组件数据：{{msg}} <br> <input type="but
复制链接

扫一扫