如何在 created() 挂钩期间使用数据初始化 Vue-CLI 应用程序? [英] How to initialize Vue-CLI app with data during created() hook?
问题描述
我正在更新一个大型 lecacy 系统，因此我受限于我能做什么和不能做什么.
我有一个小型的多组件 Vue-CLI 应用程序，它将替换多个重型 jQuery 表单.在某些情况下，同一页面上会有多个 Vue 应用程序实例.我需要能够将数据传递到每个实例并将该数据推回.每个实例都需要与其自己的一组数据进行交互.
我目前正在像这样在我的 main.js 文件中安装应用程序...
const mounts = document.querySelectorAll('.a-mount-spot');for ( let i = 0; i < mounts.length; i++ ) {让 mount = mounts[i];新的 Vue({渲染:h =>h(应用程序)}).$mount(mount);}App 是一个带有多个子组件的单文件 Vue 组件.我不知道如何在 created() 挂钩期间让 App 知道它自己的 mount.所以我想在创建组件时传入数据.我该怎么做?
例如，所需结果的伪代码可能如下所示...
main.js
从'vue'导入Vue；从'./App.vue'导入应用程序；const mounts = document.querySelectorAll('.a_mount_spot');for ( let i = 0; i < mounts.length; i++ ) {让 mount = mounts[i];新的 Vue({init_data: {//这实际上并没有传入数据who_am_i:mount.dataset.myname},渲染:h =>h(应用程序)}).$mount(mount);}App.vue
<div id="应用程序">{{ 我是谁 }}</模板><脚本>导出默认{名称:'应用'，数据:函数(){返回 {我是谁: ''}},创建(){this.who_am_i = ''//创建时如何获取传入的 init_data}}<风格></风格>
一种工作方法
如果我在组件生命周期中等到它被挂载之后，我就可以做到这一点...
此方法要求 HTML 看起来像这样...
<div class="a-mount-spot"><div class="app-wrapper" data-myname="Name 2"><div class="a-mount-spot">
这感觉很糟糕.它也不允许我在安装之前访问 who_am_i.最好提供一些关于创建的初始数据.
也许你可以用 props 试试:
const mounts = document.querySelectorAll('.a-mount-spot');for ( let i = 0; i h(应用程序，{道具:{who_am_i:mount.parentElement.dataset.myname，}})}).$mount(mount);} I am working on updating a large lecacy system, and so I am constrained by what I can and cannot do.
I have a small multi-component Vue-CLI app that will replace multiple heavy jQuery forms. There are instances where there will be multiple instaces of the Vue app on the same page. I need to be able to pass data into each instance and push that data back out. Each instance needs to interact with it's own set of data.
I am currently mouting the app in my main.js file like this...
const mounts = document.querySelectorAll('.a-mount-spot');
for ( let i = 0; i < mounts.length; i++ ) {
let mount = mounts[i];
new Vue({
render: h => h(App)
}).$mount(mount);
}
App is a single file Vue component with several child components. I don't know how to make App aware of it's own mount during the created() hook. So I would like to pass in data when the component is created. How do I do that?
For example, a psudo code of the desired result might look like this...
main.js
import Vue from 'vue';
import App from './App.vue';
const mounts = document.querySelectorAll('.a_mount_spot');
for ( let i = 0; i < mounts.length; i++ ) {
let mount = mounts[i];
new Vue({
init_data: { // This does not actuall pass in data
who_am_i: mount.dataset.myname
},
render: h => h(App)
}).$mount(mount);
}
App.vue
<template>
<div id="app">
{{ who_am_i }}
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
who_am_i: ''
}
},
created() {
this.who_am_i = '' // Some how get the init_data passed in when created
}
}
</script>
<style>
</style>
A working method
If I wait in the component lifecycle until after it is mounted, I can do this...
<script>
export default {
name: 'app',
data: function () {
return {
who_am_i: ''
}
},
mounted() {
this.who_am_i = this.$el.parentElement.dataset.myname
}
}
</script>
This method requires the HTML to look like this...
<div class="app-wrapper" data-myname="Betty">
<div class="a-mount-spot">
</div>
<div class="app-wrapper" data-myname="Name 2">
<div class="a-mount-spot">
</div>
This feels hacky. It also does not allow me access to who_am_i until after it is mounted. It would be nice to provide some initiall data on creation.
Perhaps you can try with props:
const mounts = document.querySelectorAll('.a-mount-spot');
for ( let i = 0; i < mounts.length; i++ )
{
let mount = mounts[i];
new Vue({
render: h => h(App,
{
props:
{
who_am_i: mount.parentElement.dataset.myname,
}
})
}).$mount(mount);
}
这篇关于如何在 created() 挂钩期间使用数据初始化 Vue-CLI 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
