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

by

0👍

✅

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.

👤TsingWong

3👍

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>
👤Craig

Leave a comment