其他分享
首页 > 其他分享> > Vue:ref

Vue:ref

作者:互联网

ref

先说结论:vue中可以用ref属性代替id属性。
以前我们想要获取具体某个标签dom对象,要在标签上加个id="demo",然后通过document.geElementById("demo")来获取;
现在ref也能完成这个功能,并且可以用在子组件标签上。如下:

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue!'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			}
		},
	}
</script>

标签:School,Vue,console,log,DOM,refs,ref
来源: https://www.cnblogs.com/ibcdwx/p/16498137.html