PROSAGA码农传奇-Vue-Vue组件Vue-Instant

<div class =“post-text”itemprop =“text”>
  <P>
    我稍微误解了这个问题，下面是原来的答案。
  </p>
  <P>
    这是您可以将上面的代码转换为组件的方式：
  </p>
   <pre>
    <code>
      Vue.component("movies",{
  template:`
    <div>
      {{selectedEvent}}
      <vue-instant :suggestion-attribute="suggestionAttribute" v-model="value" :disabled="false"  @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected"  @enter="enter" @key-up="keyUp" @key-down="keyDown" @key-right="keyRight" @clear="clear"  @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant>
    </div>
  `,
  data(){
    return {
      value: '',
      suggestionAttribute: 'original_title',
      suggestions: [],
      selectedEvent: ""
    }
  },
  methods: {
    clickInput: function() {
      this.selectedEvent = 'click input'
    },
    clickButton: function() {
      this.selectedEvent = 'click button'
    },
    selected: function() {
      this.selectedEvent = 'selection changed'
    },
    enter: function() {
      this.selectedEvent = 'enter'
    },
    keyUp: function() {
      this.selectedEvent = 'keyup pressed'
    },
    keyDown: function() {
      this.selectedEvent = 'keyDown pressed'
    },
    keyRight: function() {
      this.selectedEvent = 'keyRight pressed'
    },
    clear: function() {
      this.selectedEvent = 'clear input'
    },
    escape: function() {
      this.selectedEvent = 'escape'
    },
    changed: function() {
      var that = this
      this.suggestions = []
      axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
        .then(function(response) {
        response.data.results.forEach(function(a) {
          that.suggestions.push(a)
        })
      })
    }
  },
  components: {
    'vue-instant': VueInstant.VueInstant
  }
})

</code>
  </pre>
  <P>
    的<strong>
      原始答案
    </强>
  </p>
  <BLOCKQUOTE>
    <P>
      我只想将上面的示例移动到表单Vue.component（）。代码不应该在新的Vue（）中但在Vue.component（）中
    </p>
  </BLOCKQUOTE>
  <P>
    如果我理解正确，您正在寻找的语法是
  </p>
   <pre>
    <code>
      Vue.component('vue-instant', VueInstant.VueInstant)

</code>
  </pre>
  <P>
    更新
    <a href="https://jsfiddle.net/dqo6vr57/114/" rel="noreferrer">
      小提琴
    </A>
    。
  </p>
</DIV>