2021-08-03 ref的两个用法

最新推荐文章于 2024-03-22 07:45:00 发布

原创最新推荐文章于 2024-03-22 07:45:00 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了Vue中ref属性的两种主要用途：一是作为DOM元素的引用，二是用于访问自定义组件实例的属性和方法。通过具体示例展示了如何在实际开发中应用这些功能。

总结

ref的功能1:在普通的dom元素上使用ref属性,则引用指向的就是dom元素
console.log(p,this.$refs.p);//输出结果一样
ref的功能2:与真实组件配合

console.log(this.this.$refs.hello.name)

例子

<div id="app">
    <p ref="p">shijie</p>
    <nihao ref="hello"></nihao>
</div>
<script>
Vue.component("nihao",{
    data(){
        return{
            name:"你好世界"
        }
    },
    methods:{
        // fn(){
        //     alert("this is a fn")
        // }
    },
    template:`<div>外部组件</div>`
});
    new Vue({
        el:"#app",
        mounted(){
            var p=document.querySelector
            ("p");
            console.log("i am p:",p);
            console.log("i am ref:",this.$refs.p);
            // this.$refs.p.innerHTML="world";
            console.log("i am ref.hello.name:",this.$refs.hello.name);
            // this.$refs.hello.fn()
        }
    });
</script>