Py.Cafe

mariobuikhuizen/

solara-vue-sub-component

Solara vue sub component

DocsPricing
  • ChildComponent.vue
  • ParentComponent.vue
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import solara
import ipyvue


@solara.component_vue("ParentComponent.vue")
def ParentComponent():
    pass

@solara.component
def Page():
    # Don't use reactivity in Page for this registration to work,
    # move that to a nother component if necessary.
    ipyvue.register_component_from_file(
        "MyChildComponent",
        "ChildComponent.vue",
         __file__)
    
    ParentComponent()
ParentComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div>
    <h1>Parent Component</h1>
    <MyChildComponent message="Hello from Parent Component!" />
  </div>
</template>

<script>
module.exports = {
  name: "ParentComponent",
};
</script>

<style>
h1 {
  color: green;
}
</style>
ChildComponent.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
module.exports = {
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

<style>
p {
  color: blue;
}
</style>