Question

基于此示例https://vuejs.org/examples/select2.html 我尝试创建组件以便将来重用。不幸的是，我的代码不起作用。

HTML：

<template id="my-template">
  <p>Selected: {{selected}}</p>
  <select v-select="selected" :options="options">
    <option value="0">default</option>
  </select>
</template>

<div id="app">
  <my-component></my-component>
</div>

Vue的：

Vue.component('my-component', {
    template: '#my-template'
})

Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],

  bind: function () {
    var self = this
    $(this.el)
      .select2({
        data: this.params.options
      })
      .on('change', function () {
        self.set(this.value)
      })
  },
  update: function (value) {
    $(this.el).val(value).trigger('change')
  },
  unbind: function () {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    selected: 0,
    options: [
      { id: 1, text: 'hello' },
      { id: 2, text: 'what' }
    ]
  }
})

https://jsfiddle.net/xz62be63/

感谢您的帮助！

Answer 1

你的问题与指令本身无关。

selected和options在您的Vue主要实例的数据中定义，而不是在my-component的数据中定义 - 因此在其模板中不可用。

但是你可以使用props将它从主实例传递给组件：

<div id="app">
  <my-component :selected.sync="selected" :options="options"></my-component>
  <!-- added the .sync modifier to transfer the value change back up to the main instance-->
</div>

并在代码中：

Vue.component('my-component', {
    template: '#my-template',
    props: ['selected','options']
})

更新小提琴：https://jsfiddle.net/Linusborg/rj1kLLuc/

模板

1 个答案: