子组件

<template>
  <div>
    <!-- 父组件使用v-model发送input事件就可以接收到了 -->
    <div class="aui-bar aui-bar-tab aui-margin-t-15 aui-margin-b-15" style="bottom: -15px;">
      <div class="aui-bar-tab-item aui-padded-l-15 aui-padded-r-15" style="width: auto;">
        <div class="search-input aui-font-size-14 t-color-333">
          <input :value="value" @click="inputListClick($event)" @input="inputListInput($event)" @focus="inputListFocus($event)" @blur="inputListBlur($event)" style="width: 96%;background-color: #f5f5f5;height: 100%;-webkit-user-select:text !important;"></input>
        </div>
      </div>
      <div class="aui-bar-tab-item aui-padded-r-15" @click="sendOut" style="width: 2.2rem;">
        <i class="aui-iconfont aui-icon-paper"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'inputList',
  props: {
    type: { // 文本框类型
      type: String,
      default: 'text'
    },
    FullScreenId: { // 文本框被键盘遮住
      type: String,
      default: ''
    },
    value: [String, Number]
  },
  data () {
    return {
      imagesUrl: { // 排版图片使用懒加载
      },
      pageHeightOne: '', // 页面高度
      pageHeightTow: ''
    }
  },
  created () {
  },
  mounted () {
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        // window.scroll(0, 0) // 滚到顶部
        document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight
      })()
    }
  },
  methods: {
    // 键盘输入
    inputListInput (e) {
      if (typeof e.target.value === 'string') {
        if (/[\u4e00-\u9fa5]/.test(e.target.value)) {
          e.target.value = ''
        } else {
          // console.log('合格')
        }
      } else {
        console.log('数据类型不正确')
      }
      this.$emit('input', e.target.value)
    },
    // 获取焦点
    inputListFocus (e) {
      // console.log(e)
      this.$emit('inputListFocus', 'focus')
    },
    // 失去焦点
    inputListBlur (e) {
      // console.log(e)
      this.$emit('inputListBlur', 'blur')
    },
    // 点击
    inputListClick (e) {
      this.$emit('inputListClick', 'click')
    },
    sendOut () {
      this.$emit('sendOut', this.value)
    }
  }
}
</script>

<style scoped>
.search-input {
  height: 1.6rem;
  line-height: 1.6rem;
  background: #f5f5f5;
  border-radius: 30px;
  position: relative;
  font-family: "aui_iconfont" !important;
  text-align: left;
  padding-left: 1.5rem;
  color: #999999;
}
.search-input:after {
  position: absolute;
  left: 0;
  padding-left: 0.5rem;
  content: "\e615";
}
</style>

父组件

<template>
  <div class="main-containt" ref="messagesContainer"  style="background-color:#f5f5f5;height: 100%">
    <my-header title="建言献策"></my-header>
    <div class="p-l-15 p-r-15 p-t-15">

      <div style="padding-bottom: 30px;" class="myChatBox"  >
        <div style="border-bottom: 1px solid gray" class="m-b-15" v-for="item in valueList">
          <div class="aui-chat-name " style="font-weight: bold">我的建言献策</div>
          <div><span class="t-color-999">{{item.createTime}}</span></div>
          <div class="aui-chat-content break">
            {{item.suggestionContent}}
          </div>
        </div>
      </div>


      <input-list v-model="value" @sendOut="sendOut"></input-list>
    </div>
  </div>
</template>

<script>
import api from '@/api/api'
import { Scroller } from 'vux'
import inputList from '../common/inputList'

export default {
  name: 'advice',
  components: {
    Scroller,
    inputList
  },
  data () {
    return {
      value: '',
      valueList: [],
      // eslint-disable-next-line no-undef
      username: userName,
      Height: 0
    }
  },
  updated: function () {
  },
  mounted () {
    this.loadData()
    this.$nextTick(() => {
      this.Height = this.getClientHeight() - 65
    })
  },
  methods: {
    loadData () {
      let para = {
        para: {
          username: this.username
        },
        ver: ''
      }
      api.getPoAdviceSuggestionList(para).then(res => {
        if (res.code === '0') {
          this.valueList = res.data.result
          this.scrollToBottom()
        }
      })
    },
    sendOut () {
      let para = {
        para: {
          username: this.username,
          suggestionContent: this.value
        },
        ver: ''
      }
      api.getPoAdviceSuggestionAdd(para).then(res => {
        if (res.code === '0') {
          this.commShowToast('发送成功')
          this.value = ''
          this.loadData()
        }
      })
    },
    input (val) {
      this.value = val
    },
    scrollToBottom () {
      this.$nextTick(() => {
        this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight
      })
    }
  }
}
</script>

<style scoped>


</style>