Partage de data entre component parent et component child
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:
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:
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:
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
Citation:
[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.
