vue组件数据自动更新sync

首先说下 父子组件传递值的问题：
父页面传给子组件使用 props
子组件传回给父页面使用 emit
在以前的时候，子组件的值传回来后，父页面需要写一个事件用来赋值，做不到自动更新。（具体怎么使用组件这里就不多说了）
本文就是为了解决这个麻烦的问题，效果就是，子组件封装好后，父组件只需要使用 不需要做其他处理。

根据上面的问题，下面写一个组件用来计数textarea输入的值的长度，有限制字数的功能

(下面是基于vue element框架，ps：element里面有这个功能，但是有些许不一样)
element使用如下：

具体可查看element的文档https://element.eleme.cn/#/zh-CN/component/input

下面介绍下本人自己写的组件：（代码为了可以直接拿去使用，有些冗余，可以直接滑到最底下看注意点）

//子组件完整代码

父页面使用如下：

需要注意的几个位置：

1.props 里面给默认值的时候，如果type是Array 或 Object，需要使用函数return回来，如上代码props里面autosize
2.props 如果type是多个类型，可用数组表示，如上代码props里面limit
3.props传进来的值 不能被更改，所以传进来的val， 我们使用value保存一下，然后操作value。另外有个问题，组件只会在创建的时候 赋值一次，所以我在页面加了个watch监听val，避免出现如下问题：比如我们有个弹框使用的是v-show，没用v-if。弹框里面有这个组件，当我们第一次打开弹框的时候val和value都为空，我们编辑后val和value都有值了，然后在父页面关掉弹框，并且重置值。接下来再打开弹框的时候，会发现val在父页面被清空了，但是value在子组件里面还是上次的值，所以需要加个watch再赋值一遍。（用v-if的话忽略这点）
4.如果想在父组件调用子组件里面的方法(比如函数名为childFun)，可以给子组件加上ref="test"，在父组件中使用this.$refs.test.childFun()就可以调用到了
5.接下来这点就是本文的主题了。使用组件的时候带上.sync修饰符，然后在子组件里面emit的时候写法如上代码this.$emit('update:val',this.value);
update:val里面的val是传进来的值的字段名字。这样子在父页面就不需要赋值一次了。

最后效果如下：

image.png

image.png

image.png