Vue新手,请教一些基础的问题

不爱用
  • 3
新手上路,请多包涵

问题描述

本人是vue的新手,在进行学习的时候,使用ant design vue 自动创建的vue demo开发。在这个过程中把自己得混乱了,主要是关于vue实例调用的。
App.vue文件:

export default {
 data() {

 return {
      a:100,
      b:200,
 };
 },
 methods:{
 myfun(){
 console.log(this);
 },
 },
 };

在main.js中,使用的是默认生成的方案创建Vue实例:

import App from './App';
var vue=new Vue({
    render: h => h(App),
});
vue.$mount('#app');

此时有一个需求是能够访问新创建的实例的属性'a'以及函数myfun()

console.log(vue.$data.a);
console.log(App.data().a);

但是第一行返回的值是undefined,第二行能够正确返回属性a的值。
于是我就认为App.才是正确调用的方式,并使用它调用了myfun()

App.methods.myfun();

然后奇怪的情况出现了,myfun里的log(this)打印的是methods这个对象而不包含App的data等其他成员,让我无法达到预期的目标,可能是太新手的缘故,查了半天找不到类似的问题。
我主要疑惑的是,new一个Vue对象出来后,vue作为实例应该是可以调用类的成员函数和成员呀,我大概是按照以前写cpp的思路考虑的,所以被搞得有点头疼。
所以想请教一下各位大神,一个新创建的Vue对象是如何访问其成员及成员函数的?

评论
阅读 151
1 个回答
✓ 已被采纳

这个最好还是通过event-bus来处理,因为你可能不知道你的组件层级有多深

var vue = new Vue(/*...*/)

// 访问组件数据
console.log('访问数据:', vue.$children[0].a)

// 执行组件方法
vue.$children[0].myfun()
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏