Vue 组件与 vanilla 代码互操作

Question

我正在尝试将 Vue.js 放入不使用 Vue 的现有项目中。但是我找不到任何资源或文档来说明如何编写具有 API 的 Vue 组件，该 API 可供 Vue 世界之外的代码使用。从上到下，一切都集中在使用 Vue 构建的应用程序上。

var MyV = Vue.extend({
  template: `
    <div>
        <h4>{{ message }}</h4>
        <ul>
            <li v-for="item in items">
                {{item}}
                <button v-on:click="remove(item)">-</button>
            </li>
        </ul>
        <button v-on:click="add">add</button>
    </div>
    `,
  data() {
    return {
      message: 'Hello Vue.js!',
      items: ['foo', 'bar'],
    };
  },
  methods: {
    add() {
      this.items.push(Math.random());
    },
    remove(item) {
      this.items.splice(this.items.indexOf(item), 1);
    }
  }
});

var v = new MyV({
  el: c1
});

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>

<div id="c1"></div>

我只是玩弄就知道了：

在 Vue 之外，我可以改变 v 实例，视图也会随之改变。

// everything works
v.message = "Hi there!";
v.items.push('hello');
v.items.add();

我应该如何收听“onchange”事件？我可以找到几种实现方式，但是有一种“官方”方式吗？

设置内容非常简单，我可以设置任何属性，或者在实例化时对其进行初始化，但是如何从该视图中取回数据？

---

假设我正在使用 Vue 构建一个下拉菜单，我可以通过设置一个属性来填充这个“组件”。

如果这个视图中有一个“提交”按钮，我如何通知用户点击它的视图之外的代码？

如果视图为用户提供 UI 修改其内部状态（this.data），如何通知外部代码数据已被修改，然后它可以再次获取它的内容？

Answer 1

就像你可以从Vue代码外部调用v.add()一样，你可以从外部watch值成员：

v.$watch('items', (newValue) => { console.log("Items changed!", newValue); });

您还可以使用 v.$emit 和 v.$on 发送和接收自定义事件，因为每个 Vue 实例都是一个事件总线。