VUE 中 ref 获取DOM元素和组件

ref 获取DOM元素和组件

<div id="app">
	<input type="button" value="快到碗里来" @click="getElement" ref="mybtn">
	
	<h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3>
	<login ref="mylogin"></login>
</div>	

var login = {
	template:'<h1>登录组件</h1>',
	data(){
		return {
			msg:'son msg'
		}
	},
	methods:{
		show(){
			console.log('调用了子组件的方法')
		}
	}
	
}

var vm = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				getElement(){
					// ref 是 英文单词 【reference】值类型 和 引用类型 referenceError
					console.log(this.$refs.myh3.innerText)
					
					// console.log(this.$refs.mylogin.msg)
					this.$refs.mylogin.show()
				}
			},
			components:{
				login
			}
		})