Vue2 ref的使用

最新推荐文章于 2024-05-28 14:16:45 发布

没有bug的小史

最新推荐文章于 2024-05-28 14:16:45 发布

阅读量345

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/djsknsns/article/details/128046242

版权

声明

<!-- 在行内写上ref给他一个名字  -->
   <div id='app'>
        <div id="box" ref="box">使用ref</div>
        <son ref="son"></son>
        <button @click="changeSon">改变</button>
    </div>
    <template id="son">
        <div>
            son{{myson}}
            <button @click="log1">打印一</button>
        </div>
    </template>

调用

    Vue.component('son', {
            template: '#son',
            data() {
                return {
                    myson: 'myson'
                }
            },
            methods: {
                log1() {
                    console.log(1);
                }
            }
        })
        console.log(document.getElementById('box'));

        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                changeSon() {
                    console.log(this.$refs.son.myson);
                    this.$refs.son.myson = 'father'
                }
            },
            created() {
                console.log(this.$refs);
            },
            mounted() {
                //操作DOM
                console.log(this.$refs.box);
                this.$refs.box.style.color = 'red'
                this.$refs.box.style.fontSize = '40px'
                console.log(this.$refs.son);
                this.$refs.son.log1()
                console.log(this.$refs.son.myson);
            }
        })