vue 自定义组件 v-model 用法

最近解锁一个vue新用法,自定义组件 v-model,记录下来,加深印象,也希望对有需要的同学一些启发.

//父组件代码
<template>
  <div>
    <el-row  class="padding1vw">
      <mt>自定义组件 v-model 用法</mt>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" class="padding1vw">
        父组件:{{inputValue}}
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24"  class="padding1vw">
        <childmodelroutine v-model="inputValue"></childmodelroutine>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  mixins: [require("@/mymixins").default],
  name: "custommodelparent",
  data() {
    return {
      inputValue:'文本框来自父组件的问候,我是你爸爸,你是我儿子一号',
    };
  },
  components: {
    childmodelroutine: () => import("./childmodel/childmodelroutine"),
  },
};
</script>

父组件定义好需要传给子组件的值

//子组件代码
<template>
  <div>
    <el-row>
      <el-form>
        <el-form-item>
          <mdb tooltip :disabledTime="0" @click="returnFather" :disabled="disabled">{{changemsg1}}</mdb>
        </el-form-item>
        <el-form-item>
          子组件:<el-input v-model="inputValue" placeholder="请输入内容" size="small"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  mixins: [require("@/mymixins").default],
  name: "custommodelparent",
  data() {
    return {
      changemsg1: "点击儿子一号会修改爸爸的值",
      disabled: false,
    };
  },
  props: ["inputValue"],
  model: {
    prop: "inputValue",
    event: "returnFather"
  },
  methods: {
    returnFather() {
      this.$emit("returnFather", "收到收到,我是儿子一号,我已经将爸爸的值修改");
    }
  }
};
</script>

子组件中,先用props接收,model中属性prop为父组件传过来的值,event为回应父组件的方法,此时父组件v-model绑定值,无需方法接收,能实现直接通信,props接收值名字不一定要与父组件一致.

官方有提到一种简单的写法:默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。修改一下代码,实现相同的效果.

//附上子组件代码
<template>
  <div>
    <el-row>
      <el-form>
        <el-form-item>
          <mdb tooltip :disabledTime="0" @click="returnFather" :disabled="disabled">{{changemsg1}}</mdb>
        </el-form-item>
        <el-form-item>
         子组件: <el-input v-model="value" placeholder="请输入内容" size="small"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  mixins: [require("@/mymixins").default],
  name: "custommodelparent",
  data() {
    return {
      changemsg1: "点击儿子一号会修改爸爸的值",
      disabled: false,
    };
  },
  //默认的 'value' && 'input' 事件去处理，如果用原生事件的，甚至连model属性也可以省去。
  // value 为默认父组件传过来的值 input 为传递父组件的事件  代替 model 中的prop 和event
  props: ["value"],
  // model: {
  //   prop: "inputval",
  //   event: "returnFather"
  // },
  methods: {
    returnFather() {
      this.$emit("input", "收到收到,我是儿子一号,我已经将爸爸的值修改")
    }
  }
};
</script>

效果图

修改之前

image.png

修改之后

image.png

父子组件的值都改变了,实现了组件直接的v-model绑定

附上官网地址:https://cn.vuejs.org/v2/guide/components-custom-events.html