Vue组件（三）自定义v-model传值

前言

我们在使用别人的组件的时候（例如element-ui），可以直接使用v-model监听组件内值的变化；
例如：

<template>
  <div>
    <el-input v-model="text" placeholder="请输入"></el-input>
  </div>
</template>

<script>
export default {
  name: "customInput",
  data() {
    return {
      // text可以监听el-input的值的变化
      text: ""
    }
  },
};
</script>

那我们自定义组件的时候，又需要如何做呢？

自定义v-model

• 子组件代码

<template>
  <div>
    <el-input
      v-model="text"
      placeholder="请输入"
      @input="respondsToChange"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: "customInput",
  props: {
    content: String,
  },
  // 这里用来定义v-model的值
  model: {
    prop: "content",  // v-model对应的属性
    event: "change",  // v-model对应的时间
  },
  data() {
    return {
      text: "",
    };
  },
  watch: {
    content: {
      immediate: true,
      handler(val) {
        this.text = val;
      },
    },
  },
  methods: {
    respondsToChange() {
    // 触发v-model的事件
      this.$emit("change", this.text);
    },
  },
};
</script>

• 父组件

<template>
  <div class="home">
    首页:{{ content }}
    <customInput v-model="content"></customInput>
    <el-button type="primary" @click="respondsToClick">修改文本框</el-button>
  </div>
</template>

<script>
import customInput from "./customInput"
export default {
  name: 'Home',
  components: { customInput },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    respondsToClick() {
      this.content = "张三"
    }
  }
}
</script>

• 截图

  
  截图