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

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

CodePudding user response：

You should absolutely be able to do that. https://vuejs.org/guide/components/slots.html#slot-content-and-outlet

Create a new Vue component and put the <slot></slot> tag within your new component.

Then just be like

<app-my-new-modal>Please wait Buddy.</app-my-new-modal>

CodePudding user response：

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.