【vue-ref的使用】

最新推荐文章于 2024-10-05 01:22:45 发布

柒一’

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量154

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67969470/article/details/128045831

版权

这篇博客展示了如何在Vue.js中使用ref属性来操作DOM元素，包括改变元素样式和调用子组件的方法。在`mounted`钩子中，作者修改了根组件的样式，并尝试访问和操作子组件的属性。此外，还定义了一个子组件Son，其中包含自己的数据和方法。

摘要由CSDN通过智能技术生成

ref获取dom元素，操作dom元素

<div id='app'>
        <div ref="box">从今天开始我要自己~~~</div>
        <son ref="sonbox"></son>
        <button @click="change">按钮</button>
    </div>
     <template id="son">
        <div>
            {{msg}}
            <button @click="log1">钮按</button>
        </div>
    </template>

<script>
        Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: '从明天开始我要自己~~~'
                }
            },
            methods:{
                log1(){
                    console.log(this.msg);
                }
            }
        })
        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                change() {
                    // this.$refs.box.style.color='red'
                    // this.$refs.box.style.fontSize='40px'
                    // this.$refs.sonbox.msg.style.color='red'
                    // this.$refs.sonbox.msg.style.fontSize='40px'
                    console.log(this.$refs.sonbox);
                    // this.$refs.sonbox.msg
                }
            },
            mounted() {
                this.$refs.box.style.color = 'red'
                this.$refs.box.style.fontSize = '40px'
                console.log(this.$refs.sonbox.msg);
                this.$refs.sonbox.log1()
            }
        })
    </script>