Vue+iview封装自定义输入组件

Vue封装自定义组件就和上篇的React有些许不同。

众所周知，vue的数据是单向流动的，使用v-model可以完成双向绑定

首先我们一样的先写一个vue的父组件

再写一个子组件

在这里我们可以看到，父组件中子组件使用v-model双向绑定数据，但是子组件不能再使用v-model绑定，因为content是由上层组件传过来，依照vue的规范，props是不能被更改的，所以我们需要手动写一个v-model

v-model其实就是值与事件的语法糖

所以v-model=''value0'可以直接写成 :value='value0',@on-change=''value1=>value0=value1'

所以我们在子组件写的Input输入框其实就是将value绑定在父组件的content，而改变值得方法是调用父组件去改变，就不会影响到单向数据流的规范。

其实很多人也发现了，如果上层父组件穿过来的content是一个对象，这里就可以使用v-model去绑定这个对象中的某一个值，vue也不会报错，但这样不符合规范，更会影响代码的冗杂度。

我们现在看一下界面

在子组件中输入内容

父组件data中的值已经被改变。

以下是源码

App.vue

Child.vue

如有不对请指正，谢谢。