$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

• 在指定的元素上，添加 ref="名称A"
• 在获取的地方加入 this.$refs.名称A
  • 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
    • 可以直接操作
  • 如果ref放在了组件对象上，获取的就是组件对象
    • 可以获取到组件内data、methods，通过 this.$refs.data名称/method名称
    • 可以获取到DOM对象，通过 this.$refs.名称A.$el进行操作
  • 对应的事件
    • created：完成了数据的初始化，此时还未生成DOM，无法操作DOM
    • mounted：将数据已经装载到了DOM之上，可以操作DOM

// 子组件sw-body内代码
data() {
  return {
  	name: 'lance'
  }
}
methods: {
	show() { console.log('hello world') }
}
=========================================================
// 父组件内代码
// DOM元素
<div ref="div"></div>
// 组件
<sw-body ref="body"></sw-body>
// 引用
mounted() {
    this.$refs.div.innerHTML = "我是div"
    this.$refs.body.$el.innerHTML = "我是子组件body";
  	console.log(this.$refs.body.name) // lance
  	console.log(this.$refs.body.show()) // hello world
}