Bonjour,

J'ai enfin commencé VueJs après 15 ans de Jquery.
Puisque je n'utilise pas npm et pas de compilation, j'ai trouvé vue3-sfc-loader pour charger des fichiers .vue
Par contre, comment interagir sur les data du parent à partir du child.

Index.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Test</title>
  </head>
  <body>
    <div id="app">
      <vue-main-component msg="Foobar"></vue-main-component>
      Mon info pere : <b>{{info}}</b>
    </div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="./js/vue-app.js"></script>
  </body>
</html>

js/vue-app.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const { createApp } = Vue;
const { loadModule } = window['vue3-sfc-loader'];
const options = {
  moduleCache: {
    vue: Vue,
  },
  getFile(url) {
    return fetch(url).then((resp) =>
      resp.ok ? resp.text() : Promise.reject(resp)
    );
  },
  addStyle(styleStr) {
    const style = document.createElement('style');
    style.textContent = styleStr;
    const ref = document.head.getElementsByTagName('style')[0] || null;
    document.head.insertBefore(style, ref);
  }
};
const app = createApp({
	data() {
    return {
			info:'Mon info'
		}
	},
 
  components: {
    VueMainComponent: Vue.defineAsyncComponent(() =>
      loadModule('js/vue-components/vue-main-component.vue', options)
    )
  },
}).mount('#app');

vue-main-component.vue
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <h2>{{ headline }}</h2>
 
	Dans le child : {{info}} ...<br>
	Mon msg : {{msg}}<br>
 
	<input type="text" v-model="info">
</template>
 
<script>
export default {
  data() {
    return {
      headline: 'Vue Main Component Headline'
    };
  },
  props: {
    msg: String,
  },
};
</script>


Mon erreur
[Vue warn]: Property "info" was accessed during render but is not defined on instance.
at <Anonymous msg="Foobar" >
at <AsyncComponentWrapper msg="Foobar" >
at <App>

Je voudrai que "Dans le child : {{info}}" avoir la valeur info qui est dans vue-app.js
Idem : la valeur info dans vue-app.js doit être modifiable dans vue-main-component.vue

Est-ce possible en passant par vue3-sfc-loader ?
Si non, vous avez des pistes ?

Grand merci par avance.