vue中一个关于ref的易错点

改bug改了两天，主要是把时间花在找bug上了，解决之后感觉这似乎是一个很小的问题，所以记录一下，巩固一下吧。
出错代码段：

<template>
	<WangEditor ref="md" :content="content" />
	<Button @click="save()">保存</Button>
</template>
<script>
	data(){
		content:''
	},
	methods:{
		save(){
			this.content=this.$refs.md.codeHtml;
			/*将this.content上传数据库的代码，这里就不贴出来了*/
		}
	}
</script>

原因：
如下图，在官方文档里解释过，$refs不是响应式的，因此不应该用它来做数据绑定。而这里，点击保存的时候，是希望能将富文本编辑器WangEditor里的内容保存到数据库，由于$refs不是响应式的，因此在存储的时候，内容上会出现未知的错误。

解决方法：

<template>
	<WangEditor v-model="content" />
	<Button @click="save()">保存</Button>
</template>
<script>
	data(){
		content:'',/*也可以从数据库中读取出来显示*/
	},
	methods:{
		save(){
			/*将content中的内容上传数据库*/
		}
	}
</script>