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

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

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

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

再写一个子组件

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

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

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

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

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

我们现在看一下界面

在子组件中输入内容

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

以下是源码

App.vue

<template>
  <div id="app">
      我是父组件，我的内容是:{{content||"无"}}
      <Child v-model="content"/>
  </div>
</template>

<script>
import Child from './components/Child';
export default {
  name: 'app',
    components:{Child},
  data(){
      return {
          content:null
      }
  }
}
</script>

<style>
 #app{
     text-align: center;
 }
</style>

Child.vue

<template>
   <div>
       我是子组件，我有一个输入框:
       <Input :value="content" @on-change="(e)=>$emit('change',e.target.value)" style="width: 200px"/>
   </div>
</template>

<script>
    export default {
        name: "Child",
        model: {
            prop: 'value',
            event: 'change'
        },
        props:["content"]
    }
</script>

<style scoped>

</style>

如果您觉得此博客有错误或改进之处，请留言