大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

学会在组件中使用v-mode

往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也许会简单很多。

子组件UserInfo.vue

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="value=$event.target.value">
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    }
  }
</script>

父组件引用子组件

<user-info v-model="msg"></user-info>

一个组件上的 v-model 默认会利用名为 valueprop 和名为 input 的事件。参考链接

这样写简单很多了,比起子组件$emit父组件自定义事件的形式