export default { data() { return { title: '首页', } }, mounted() { // methods里面定义的方法, 需要赋值给window window.jingli = this.jingli; }, methods: { ...
var eventHub = new
Vue
();
2.在事件当前的组件
中
，在created
中
，用$on向公共的组件eventHub传递，translate是自定义的，getCardNum(data)是要在
外部
调用
的
方法
;
eventHub.$on('translate', function (data) {
that.getCardNum(data);
3.最后在父组件
中
，注意负组件要用一个变量保存，var vm = new
Vue
({})；
4.在父组件
中
的
methods
的
方法
中
定义一个
方法
，在
方法
里
用$emi
需求：在
js
文件
中
的
js
_fun()
中
得到一个结果，想要把该结果作为参数传给
vue
中
vue
_fun()
方法
，并在
vue
_fun()
中
执行该参数相关的操作；
js
文件和
vue
不在同一个文件夹下
//
vue
mounted(){
//关键是这句，一个
方法
对应着
js
中
的
方法
，一个
方法
对应着
vue
中
的
window.callfun = this.
vue
_fun;
methods
:{
vue
_fun(param){
//
js
js
_fun(){
所谓的
外部
js
，可以是 .
js
文件，也可以是 .html文件;
vue
中
的
methods
方法
也就是 .
vue
文件
里
的
methods
属性下的
方法
.
当 原生
js
和
vue
中
methods
的
方法
不在同一个文件下，
js
要
调用
vue
中
methods
的
方法
，操作如下：
//.
vue
文件
里
的代码
export default {
name: 'home',
mixins: [mainMixin],
data: function () {
return {...}},
computed
1.首先定义一个公共的
vue
组件；
var eventHub = new
Vue
();
2.在事件当前的组件
中
，在created
中
，用$on向公共的组件eventHub传递，translate是自定义的，getCardNum(data)是要在
外部
调用
的
方法
;
eventHub.$on('translate', function (data) {
that.g
刚学
vue
的时候，以为要想
方法
自启动，只能通过生命周期函数的钩子。
而
methods
里
的函数大多用@ckick进行
调用
要想直接启用
里
面的
方法
，给挂载的
vue
一个名字就行了，如下
var app = new
Vue
({
el: "#app",
methods
:{
aaa:function(){
alert("Hello world");
在
Vue
中
，我们可以使用ref属性给特定的组件添加一个标识符。一旦添加了标识符，我们通过this.$refs来访问实例的属性和
方法
。这个特性只适用于直接子组件，而且如果同一组件多次使用了相同的ref，则$refs会指向一个数组。
Vue
还为我们提供了$emit
方法
，可以在组件之间传递数据和事件，我们可以在组件内使用$emit触发一个自定义事件，并传递参数。在组件
外部
，我们可以通过@eventName监听这个事件，并在回调函数
中
获取传递的参数。这样就可以在组件之间实现数据和事件的传递，避免了直接
调用
组件实例的
方法
。
另外，如果我们需要在组件
外部
调用
组件
方法
，我们可以在组件内部定义一个
方法
，然后在组件
外部
通过$refs指向的组件实例来
调用
这个
方法
。例如：
```html
<template>
<button @click="showMsg">显示消息</button>
</template>
<script>
export default {
methods
: {
showMsg() {
console.log('Hello,
Vue
!');
</script>
在组件
外部
调用
这个
方法
：
```javascript
this.$refs.myComponent.showMsg();
其
中
myComponent是组件的ref属性值。这种
方法
调用
方式虽然可行，但有些不太优雅，建议使用$emit或
vue
x等方式来进行组件之间的数据和事件的传递。
