Vue中当点击按钮与需要获取的内容为兄弟层级时如何获取

类似于这样的情况，以一段代码作为示例

<div class="hello">
	<div class="one">ABCD</div>
	<div class="two">
		<button @click="clickMe>点击按钮</button>
	</div>
</div>

此时为一个大盒子包裹下的两个小盒子（承载内容）
当点击第二个盒子中的button按钮时要获取到第一个盒子中的内容
vue提供了$ref方法 用法如下

<div class="hello" ref="getMsg">
	<div class="one">ABCD</div>
	<div class="two">
		<button @click="clickMe>点击按钮</button>
	</div>
</div>

export default {
	data () {
		return {
		}
	},
	methods: {
		getMsg () {
			console.log (this.$refs.getMsg.firstChild.innerHTML)
		}
	}
}

如此便可以获取到内容了
这种方法为vue提供的样板用法
原生js中的方法要更为直观和简单 个人在项目中曾经将盒子层级嵌套之后点击无法直接获取ID 便想到使用$ref方法
ref的引用是相当于一个DOM节点，而且是一个string类型的值。

个人理解为创建虚拟DOM节点并进行操作，此DOM节点在Vue实例没有渲染完成前时不存在的，即是不可操作的，当Vue实例渲染结束时可以通过this.$ref对其下属的节点进行操作 修改样式或其他操作