vue-cli data数据渲染

Question

export default {
    name: 'HelloWorld',
    data () {
        return {}
    }
}    

text();

function text(){
    //这里怎么插入改变data中的msg值
}

Answer 1

据我的了解， 是不可以的。

因为你export default 只是一个class，并不是实例化的VM。
除非你这个是一个实例化的vm你就可以。 由于你这个组件不是顶层元素，所以建议的做法是放到vuex中管理。

如果你确定要用这种方式，我的建议是这样：

// sub-app.js
export default new Vue({
    el: '#sub-app' 
    name: 'HelloWorld',
    data () {
        return {}
    }
})    

// 别的地方引用
import SubApp from '../subApp.vue'
text();

function text(){
    SubApp.$data.msg = 'new msg'
}

Answer 2

这样的需求是什么场景呢。
一般都是在模板中使用data中数据。

<template>
    <div>
    {{msg}}
    </div>
</template>

Answer 3

Answer 4

这个事件要么是 methods 里面定义的方法吧，在那里面也可以操作 this.a 直接访问赋值

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()

要么是官网这样的：vm.$data

var vm = new Vue({
  data: data
})


vm.a // => 1
vm.$data === data