ref獲取DOM元素和組件

獲取元素：
js中寫法：

var vm = new Vue({
    el:"#newBrand",
    data:{
    },
    methods:{
        getElement(){
            console.log(this.$refs.h31.innerText)
        }
    },
});

html中寫法：

<div id="newBrand">
    <input type="button" value="獲取元素" @click="getElement">
    <h3 id="h31" ref="h31">哈哈，今天天氣太好了！</h3>
</div>

效果：

獲取組件數據：
js中寫法：

var temp = {
    template:'<h1 >組件</h1>',
    data(){
        return{
            msg:'真的嘛?'
        }
    },
    methods: {
        show(){
            console.log("調用了子組件的方法");
        }
    }
};
var vm = new Vue({
    el:"#newBrand",
    data:{
    },
    methods:{
        getElement(){
            //獲取子組件下面的數據
            console.log(this.$refs.temp.msg)
        }
    },
    components:{
        temp
    }
});

html中寫法：

<div id="newBrand">
    <input type="button" value="獲取元素" @click="getElement">
    <temp ref="temp"></temp>
</div>

效果：

獲取組件的方法：
將上面的js中console.log(this.$refs.temp.msg)換成this.$refs.temp.show();其他的不變，html中用法也不變

效果：