vue的ref的基本使用，组件使用与操作

最新推荐文章于 2024-06-11 17:08:03 发布

余心不忍

最新推荐文章于 2024-06-11 17:08:03 发布

阅读量2.3k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49088708/article/details/125491003

版权

ref的使用

摘要由CSDN通过智能技术生成

ref的基本使用

$refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

refs命名后，放标签内后，调用【this.$refs.命名】可以和document.getElementById(id')同样的效果，得到dom的节点，也就是标签本身，在通过js的innerHTML即可得到标签上的内容

<body>

		
		 <div id="app">
			 <p @click="clickref" ref="pp" id="p">ref的使用</p>
			 
			 
		 </div>
		
		<script src="vue.js"></script>
		
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
				methods:{
					clickref(){
						console.log(document.getElementById('p'));//<p id="p">ref的使用</p>
						// console.log(document.getElementById('p').innerHTML);
						console.log(this.$refs.pp);//<p id="p">ref的使用<