2021-08-03 ref的两个用法

总结

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>