Question

我正在尝试将Vue.js放入不使用Vue的现有项目中。但我找不到任何关于如何编写Vue组件的资源或文档，这些组件具有可供Vue世界之外的代码使用的API。一切都集中在从上到下用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实例都是事件总线。

Vue组件与vanilla代码互操作

1 个答案: