How to passing html tag component (v-btn, etc) to reusable component props

Chairil Fauzi Firmansyah 0
Viewed 33

i have a problem. I want to pass a html/vuetify tag component to a reusable component like slot

example :

child

<template>
  <v-overlay" z-index="999">
      <v-container>
          <v-card>
            <v-container>
                <self-building-square-spinner/>
                {{ children }} <-- data from child will replace in here
              </v-col>
            </v-container>
          </v-card>
      </v-container>
  </v-overlay>
</template>

parent

openModal({
     show: true,
     children: (
          <div>
            <h1> Please Wait . . . </h1>
          </div>
        ),
})

how to implement it?. I used props, but still not work

vuetify.js vue.js javascript
2 Answers
userr6qw0

i think you may consider the some feature in react just like this

function Input(props) {
  const [value, setValue] = useState("");

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {props.renderKelvin({ value: value + 273.15 })}
      {props.renderFahrenheit({ value: (value * 9) / 5 + 32 })}
    </>
  );
}

function App() {
  return (
    <Input
      renderKelvin={({ value }) => <div className="temp">{value}K</div>}
      renderFahrenheit={({ value }) => <div className="temp">{value}°F</div>}
    />
  );
}

perhaps you can use JSX in Vue. just try it.

TsingWong0
Related