用脚手架开发项目时,render中的数据如何动态获取?
发布于 2 个月前 作者 ab8512 109 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

如:
import Vue from ‘vue’
import App from ‘./App.vue’
Vue.config.productionTip = false;
var data={
props: {
data1: ‘今天是星期天’
}
};
new Vue({
render: h => h(App,data)
}).$mount(’#app’);

上面代码中的 render: h => h(App,data)这边的data数据目前是静态的,如果要改为异步从服务端获取数据,那如何处理?

1 回复

emmm,能把问题描述得更详细些嘛?
如果只是单纯的ajax异步获取data中的数据的话,建议在你的App.vue中的data里面创建一个数据对象,并将main.js中的data赋值给这个对象,然后在App.vue中编写异步从服务端获取数据的逻辑,然后直接修改对象的值就可以(因为vue的数据绑定是双向的,data变了,视图也跟着变)。
比如在App.vue里你可以这样写

<template>
  <div id="app">
    <div>{{propsData1}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  props: ['data1'],
  data() {
    return {
      propsData1: this.data1  
    }
  },
  mounted() {
    // 模拟一个异步请求
    setTimeout(() => {
      this.propsData1 = '123';
      console.log(this.propsData1);
    }, 1000);
  }
}
</script>

如果你想直接修改props,不是很建议,因为在子组件(App.vue)中修改父组件的props会让数据流非常难以理解。

如果你想直接在main.js里面修改这个data,个人觉得没太多必要,main.js实际上就是把根vue组件挂载到我们的dom上,让它做太多其他组件内部的功能可能不是很符合设计的思想,在vue组件里面做这个逻辑可能更好一些,可读性会更好一点。

回到顶部