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]<!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>[/CODE]
js/vue-app.js
[CODE]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');[/CODE]
vue-main-component.vue
[CODE]<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>[/CODE]
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.
Damien dempt