el-input二次封装

父组件

<template>
  <div id="app">
    <h-input v-model="name" />
  </div>
</template>

<script>
import hInput from "./views/demo/index";

export default {
  name: "App",
  data() {
    return {
      name: "",
    };
  },
  components: {
    hInput,
  },
  watch: {
    name(val) {
      console.log(val);
    },
  },
};
</script>

子组件

<template>
  <div>
    <el-input :value="value" @input="inputChange($event)"></el-input>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    inputChange(val) {
      this.$emit("input", val);
    },
  },
};
</script>
原文地址:https://www.cnblogs.com/cl1998/p/14235430.html