今天在编写vue子组件时遇到的两个问题来分享以下
父子组件传值问题
父组件
<md-editor ref="mdEditor" :text="form.content" height="400px"></md-editor>
子组件
<div><v-md-editor v-model="content":disabled-menus="[]"@upload-image="handleUploadImage"height="400px"></v-md-editor></div>
export default{props: {text: ""}}
然后就发生了以下问题
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "text"
大致意思就是在父子组件传值是单向传值，在子组件中进行修改了此值后便会发生以下错误，而我所在子组件使用的v-m-editor组件在输入内容后便会改变text的值，便导致了以上错误
解决方案：
分为多种方案，这里只讲我的解决方案，采用将子组件内所需要的不再使用props里面的属性，而是子组件属性进行替换
export default{props: {text: ""},data(){return {content: ""}},watch:{text: {handler: function (value){this.content = value}}}}
<v-md-editor v-model="content":disabled-menus="[]"@upload-image="handleUploadImage"height="400px"></v-md-editor>
这里我们采用watch监听text的值，发生变化后赋值给content，同时md-editor组件不再使用text属性，而是改用content属性，这样就解决了父子组件单向传值的问题了
踩坑二
本以为这样就解决了，没想到又报error了
[Vue warn]: Error in created hook: "Error: Input data should be a String"
大致意思说呢，应该接受一个String类型的变量，而我给的并不是String，思前想后 恍然大悟，我在新增的时候 传给子组件的text值是null啊！
既然已经发现了错误原因，那离成功就不远了，在经过一阵骚操作(百度)后，终于解决！
export default{props: {text: null},data(){return {content: ""}},watch: {text: {handler: function (value){if (value != this.value){this.content = value == null ? "" : value}}}}}
嗯… 是的，只需要给监听内加个判断就好了，草率了~
