要想解释清楚v-model在自定义组件中的用法,我们得先来看看普通的组件传值…

一、普通的组件传值

如下代码:
这是一个简单的父子,子父传值示例

父组件:

<!-- parent -->
<template>
  <div class="parent">
    我是父组件:{{par}}
    <Child @givepar="formChild" :giveChild="par"></Child>
  </div>
</template>
<script>
import Child from './children.vue';
export default {
  data () {
    return {
      par: '来自父组件的值'
    };
  },
  components: {
    Child
  },
  methods: {
    formChild (val) {
      this.par = val;
    }
  }
}
</script>

子组件:

<!-- child -->
<template>
  <div class="child">
    我是子组件:{{giveChild}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  props: {
    giveChild: String
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

在上面的传值当中我们只是父向子,子向父各传值一次,但是需要起四个左右的名字…

如果使用v-model的话,还可以让自己的脑细胞多活一会…


二、v-model

先来看一下api:
在这里插入图片描述
官方文档中说:允许一个自定义组件在使用 v-model 时定制 prop 和 event。

这句话的意思很明显,那就是不让你看懂。

我们还是来看代码吧…

首先,删掉传值的代码,写成v-model。
在这里插入图片描述
父组件:

<!-- parent -->
<template>
  <div class="parent">
    我是父组件:{{par}}
    <!-- <Child @givepar="formChild" :giveChild="par"></Child> -->
    <Child v-model='par'></Child>
  </div>
</template>
<script>
import Child from './children.vue';
export default {
  data () {
    return {
      par: '来自父组件的值'
    };
  },
  components: {
    Child
  },
  methods: {
    // formChild (val) {
    //   this.par = val;
    // }
  }
}
</script>

子组件代码:

增加model,写入prop和event
在这里插入图片描述

<!-- child -->
<template>
  <div class="child">
    我是子组件:{{giveChild}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  //   props: {
  //     giveChild: String
  //   },
  model: {
    prop: 'giveChild',
    event: 'givepar'
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

到此为止,就实现了父向子,子向父的传值了。


另,接收父组件传值也可在props中接收,但字段必须为value。

子组件代码如下:

<!-- child -->
<template>
  <div class="child">
    我是子组件:{{value}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  model: {
    // prop: 'giveChild',
    event: 'givepar'
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

以上。

Logo

前往低代码交流专区

更多推荐