vue.js - 是否可以在组件模板中使用 v-model？

Question

可以在 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

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

Answer 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>