vue基礎 ref的做用

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>