vue（14）：使用ref获取DOM元素和组件引用

获取DOM元素

<div id="app">
	<button @click="getElement">获取DOM元素</button>
	<h1 ref="myh1">我是h1元素</h1>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		methods: {
			getElement() {
				alert(this.$refs.myh1.innerText)
			}
		}
	})
</script>

获取组件引用

<div id="app">
	<button @click="getElement">获取组件引用</button>
	<mylogin ref="mylogin"></mylogin>
</div>
<script type="text/javascript">
	var login = {
		template: '<h3>登录</h3>',
		data() {
			return {
				message: '哈哈哈'
			}
		},
		methods: {
			show() {
				console.log(123)
			}
		}
	}
	new Vue({
		el: '#app',
		methods: {
			getElement() {
				//获取组件中的data数据
				console.log(this.$refs.mylogin.message)
				//执行组件中的方法
				this.$refs.mylogin.show()
			}
		},
		components: {
			mylogin: login
		}
	})
</script>