Javascript Vue组件与普通代码的互操作

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

var MyV=Vue.extend({
模板：`
{{message}}


{{item}}
-


添加
`,
数据（）{
返回{
消息：“您好，Vue.js！”，
项目：['foo'，'bar']，
};
},
方法：{
添加（）{
this.items.push（Math.random（））；
},
删除（项目）{
此.items.拼接（此.items.indexOf（item），1）；
}
}
});
var v=新的MyV({
el:c1
});

我已经通过玩弄弄弄弄明白了：

在Vue之外，我只需对

v

实例进行变异，视图就会随之改变

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

我该怎么听一个“onchange”活动？我可以用几种方法来实现这一点，但有一种“官方”的方法吗

设置东西非常简单，我可以设置任何属性，或者在实例化时初始化它，但是如何从这个视图中获取数据呢

---

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

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

---

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

与您可以从Vue代码外部调用

v.add（）

相同，您可以从外部查看

值成员：

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

您还可以使用
v.$emit
和
v.$on
发送和接收自定义事件，因为每个Vue实例都是一个事件总线。
与您可以从Vue代码外部调用
v.add（）
相同，您可以从外部查看
值成员：

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

您还可以使用
v.$emit
和
v.$on
发送和接收自定义事件，因为每个Vue实例都是一个事件总线。
您希望侦听什么更改，以及将侦听什么？我删除了主干标记，您应该从问题中删除对主干的任何引用，因为它是不相关的。你问的是Vue.js和变更事件，只关注于此。当你说“倾听变更”时，你是说在Vue之外吗？正如在Vue中通知某些外部代码有关更改一样？确切地说，我不是在用Vue构建应用程序，只是其中的一部分，所以我需要让它与其他代码“对话”。@EmileBergeron我编辑了我的问题“您想要听什么更改？”，我删除了主干标签，你应该从你的问题中删除对主干的任何引用，因为它是不相关的。你问的是Vue.js和变更事件，只关注于此。当你说“倾听变更”时，你是说在Vue之外吗？正如在Vue中通知某些外部代码有关更改一样？确切地说，我不是在用Vue构建应用程序，只是其中的一部分，所以我需要让它与其他代码“对话”。@Emilebergron我编辑了我的问题，非常有启发性，非常类似于主干视图，也有一个
视图。on
和
视图。trigger
。你认为这是一种与组件接口的好方法吗？这就是那些工具的用途。这非常有启发性，非常类似于主干视图，也有一个
视图。on
和
视图。trigger
。你认为这是一种与组件接口的好方法吗？这就是这些工具的用途。