Vue 支持双绑的搜索组件

组件代码：

<template>
  <div :class="{'hidden':hidden}">
    <el-input
      :placeholder="placeholder"
      v-model="new_search"
      size="small"
      clearable
      @input="to_input"
      @keyup.enter.native="to_search"
      @clear="to_search">
      <el-button slot="append" icon="el-icon-search" @click="to_search">{{ buttonName }}</el-button>
    </el-input>
  </div>
</template>

<script>
// 版本二的搜索组件--支持双绑
export default {
  name: 'Mysearch',
  props: {
    hidden: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入关键字(模糊搜索)'
    },
    buttonName: {
      type: String,
      default: '搜索'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      new_search: this.value
    }
  },
  methods: {
    to_search() {
      this.$emit('searchData', this.new_search)
    },
    to_input() {
      this.$emit('input', this.new_search) // 实现双绑的关键
    }
  }
}
</script>

<style scoped>
</style>

调用处代码：

<template>
  <div class="app-container">
    <!-- 使用组件 -->
    <newsearch v-model="my_pagination.search" @searchData="to_search"/>
  </div>
</template>

<script>
// 导入组件
import Newsearch from './newSearch'

export default {
  name: 'DemoManage',
  components: { Newsearch }, // 注册组件
  data() {
    return {
      my_pagination: {
        page: 1,
        page_size: 10,
        search: '',
        search_type: ''
      }
    }
  },
  created: function() {
  },
  methods: {
    // 绑定组件里面的方法，并查看效果
    to_search() {
      console.log(this.my_pagination.search)
    }
  }
}
</script>

<style scoped>
</style>