是否可以在组件模板中使用 v-model？答案

【问题标题】：Is it possible to use a v-model from inside a component template?是否可以在组件模板中使用 v-model？
【发布时间】：2018-04-25 13:55:30
【问题描述】：

可以在 Vue 组件模板中使用 v-model 语法吗？

当直接包含在 .html 中时，以下内容按预期工作

<input type="text" v-model="selected_service_shortname">

将以下内容放入组件模板中是行不通的。

var service_details = {
    template: `
    ...
    <input type="text" v-model="selected_service_shortname"> 
    ...
`
};


vm = new Vue({
    el: "#app",
    components: {
        'service-details': service_details
    },

vue.min.js:6 ReferenceError: selected_service_shortname is not defined 中的结果

将模板语法更改为

<input type="text" v-model="this.$parent.selected_service_shortname">

似乎完成了一半——外部应用到selected_service_shortname 的更改按预期显示在输入框中。但是直接修改输入框会导致Uncaught TypeError: Cannot convert undefined or null to object

我正在尝试做一个受支持的用例吗？如果是这样，是否有工作示例？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您可以在您的组件中实现对v-model 的支持。这在文档here 中有介绍。

这是一个例子。

var service_details = {
  props: ["value"],
  template: `
          <input type="text" v-model="internalValue"> 
        `,
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit("input", v)
      }
    }
  }
};

基本上，v-model 默认情况下只是传递value 属性并监听input 事件的糖。所以你需要做的就是向你的组件添加一个value 属性，并发出一个input 事件。这也可以自定义为described in the documentation。

console.clear()

var service_details = {
  props: ["value"],
  template: `
          <input type="text" v-model="internalValue"> 
        `,
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit("input", v)
      }
    }
  }
};

new Vue({
  el: "#app",
  data: {
    selected_service_shortname: "some service name"
  },
  components: {
    'service-details': service_details
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  <service-details v-model="selected_service_shortname"></service-details>
  <hr>
  Selected Service Shortname: {{selected_service_shortname}}
</div>

这样在父级中使用：

<service-details v-model="selected_service_shortname"></service-details>

【讨论】：