Partage de data entre component parent et component child

**snike** · 29/04/2023, 18h31

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.

**gwyohm** · 30/04/2023, 16h32

hello, comme l'erreur te l'indique, dans le composant enfant, tu n'as pas accès à info. tu as accès à headline via data et à msg via props.

pour y avoir accès en lecture, tu dois passer en props du composant parent vers le enfant

tu ne pourras pas modifier directement une valeur qui vient de props, tu devras passer par un évènement.

ou alors... tu passes par un store, mais c'est encore autre chose

**snike** · 08/05/2023, 14h22

Bonjour,

A l'aide de vue3-sfc-loader il met possible d'ajouter des components.
J'ai remarqué également qu'il m'était possible de modifier les props

Cordialement

Partage de data entre component parent et component child

VueJS

Discussions similaires

Partager

Partager