vue基础 ref的作用

Posted 2020-11-21 moon-yyl

1.  ref 获取dom元素，除了能获取dom元素也能获取组件dom,

  组件通信：

       在父组件中直接调用ref定义的组件的数据或者方法

  

<div id="app">
        <p ref="mybutton"></p>
        <div ref="mybutton"></div> <!-- 会覆盖 -->
        <!--遇见循环 输出是一个数组-->
        <template v-for="i in 3">
            <div ref="mybutton">ww</div> 
        </template>
        <my-button ref="myComponent"></my-button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            mounted(){
                console.log(this.$refs.mybutton);
                console.log(this.$refs.myComponent);
                console.log(this.$refs.myComponent.msg); //获取组件的数据
                this.$refs.myComponent.fn(); //获取组件的元素和方法
            },
            components:{
                "my-button":{
                    template:"<div>myYilia</div>",
                    data(){
                        return {
                            msg:"1212"
                        }
                    },
                    methods:{
                        fn(){
                            console.log("121");
                        }
                    }
                }
            }

    });
</script>