简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Utilisez secondaire.html pour lancer dynamiquement une application dans Vue3
P粉354948724
P粉354948724 2024-03-29 11:54:52
0
1
335

Je développe un projet vue3.

main.js;

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...

//just try...
app.mount("#app");

et mon public/index.html

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <style>
        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

Et mon App.vue;

<template>
        <button @click=openNewPage()>create new page</button>
        <span>{{message}}</span>
        <router-view />
    </template>
    <script>
        methods:{
            openNewPage(){
                var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
            }
        }
    </script>

Mon objet de magasin ;

export default createStore({
    state: {
      message:'Hello'
    }
});

et mon deuxième .html;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title></title>
</head>
<body>
    <div id="appSecond" style="height:100%">
        <template>
            <span>{{message}}</span>
        </template>
    </div>
</body>
</html>

Lorsque j'ouvre le deuxième écran à l'aide de la méthode OpenNewPage, je ne peux pas accéder à l'objet store et le composant que je souhaite utiliser ne fonctionne pas. J'essaye ;

Second.js

const app2 = createApp({
});

export { app2 };

et ma méthode

import { app2 } from "../second.js";
openNewPage(){
    var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    
    if (t) {
        t.onload = function () {
        t.window.app = app2;
        app2.mount("#appSecond");
        }
    }
}

D'une manière ou d'une autre, j'ai essayé d'exécuter secondaire.html mais j'ai reçu un avertissement du type "[Vue warn] : Impossible d'installer l'application : Installation du sélecteur de cible". Quoi qu'il en soit, le code ne fonctionne pas. Pouvez-vous m'aider?

P粉354948724
P粉354948724

répondre à tous(1)
P粉514001887
P粉5140018872024-03-30 09:34:57 1 plancher

openNewPage() 无法为新打开的页面运行脚本；只有新页面可以运行自己的脚本。当 openNewPage() 尝试 app2.mount(), il exécute le code sur sa propre page (au lieu d'une nouvelle page), provoquant l'erreur que vous avez observée.

Solution

Supprimez le code de montage dans openNewPage() pour qu'il n'ouvre que la nouvelle page : 

export default {
  openNewPage() {
    window.open('second.html', …);
  }
}

MISE À JOURsecond.html以加载挂载应用的脚本，并删除<div id="appSecond">中不必要的<template> : 

  

    {{message}}
  

  sssccc

Dans second.js, ajoutez le code pour installer votre application : 

// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#appSecond')
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！