vue-ref的使用

最新推荐文章于 2024-07-12 14:10:05 发布

script~

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量150

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48780364/article/details/128460845

版权

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

HTML

    <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>

JS

<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>