While I was trying to create a new reusable component, I've stuck with a problem. I want to make a reusable component that has several texts when should be changed out of this component because this is a reusable component, and I'm gonna use it in the several pages of my app, so I have to make the text changeable.

I've just used the guide and passed props in the script tag and directly accessed then using iteir keywords and prop name. But my code turned out a bit long, so I I somehow need to figure out the another do to it.

<template>
    <div >
      <div >{{ title }}</div>
      <ul >
        <li
          v-for="title in tabTitles"
          :key="title"
          @click="selectedTitle = title"
          :
        >
          {{ title }}
        </li>
      </ul>
      <slot />
      <section>
        <h2>Information</h2>
        <div >
            <h3>Genre</h3>
            <p>{{genre}}</p>

        </div>
        <div >
            <h3>Original Release</h3>
            <p>{{originalRelease}}</p>
        </div>
        <div >
            <h3>Platform(s)</h3>
            <p>{{platforms}}</p>
        </div>
      </section>
      <section>
        <h2>Staff</h2>
        <div >
            <h3>Delelopers</h3>
            <p>{{developers}}</p>
        </div>
        <div >
            <h3>Publisher(s)</h3>
            <p>{{publishers}}</p>
        </div>
        <div >
            <h3>Directors(s)</h3>
            <p>{{directors}}</p>
        </div>
        <div >
            <h3>Writer(s)</h3>
            <p>{{writers}}</p>
        </div>
        <div >
            <h3>Artist(s)</h3>
            <p>{{artists}}</p>
        </div>
      </section>
      <section>
        <div >
            <h3>Prequel</h3>
            <p>{{prequel}}</p>
        </div>
        <div >
            <h3>Sequel</h3>
            <p>{{sequel}}</p>
        </div>
        <div >
            <h3>Spin-Off</h3>
            <p>{{spin-off}}</p>
        </div>
      </section>

    </div>
  </template>
  <script>
  import { ref } from "vue";
  import { provide } from "vue";
  export default {
    setup(props, { slots }) {
      const tabTitles = ref(slots.default().map((tab) => tab.props.title));
      const selectedTitle = ref(tabTitles.value[0]);
  
      provide("selectedTitle", selectedTitle);
  
      return {
        selectedTitle,
        tabTitles,
      };
    },
    props: ["title"],
    created() {
      console.log(this.title);
    },
    props: ["genre"],
    created(){
        connsole.log(this.genre);
    },
    props:["originalRelease"],
    created(){
        console.log(this.originalRelease);
    },
    props:["platforms"],
    created(){
        console.log(this.platforms);
    },
    props:["developers"],
    created(){
        console.log(this.delevopers);
    },
    props:["publishers"],
    created(){
        console.log(this.publishers);
    },
    props:["directors"],
    created(){
        console.log(this.directors);
    },
    props:["writers"],
    created(){
        console.log(this.writers);
    },
    props:["artists"],
    created(){
        console.log(this.artists);
    },
    props:["prequel"],
    created(){
        console.log(this.prequel);
    },
    props:["sequel"],
    created(){
        console.log(this.sequel);
    },
    props:["spin-off"],
    created(){
        console.log(this.spin-off);
    },
  };
  </script>

The second problem is the fact it doesn't work at all, even though I've used the same technique that was suggested by that guy.

This is the code that I used on my page.

 <TabsWrapperNarrowVue title="sfgsdfgs"
                genre="fgdfgsdfgsdf" originalRelease="gsfdgsdf"
                platforms="sfgsdfg" developers="sgfsdgs"
                publishers="gfdgsdfgsd." directors="sfgsdfgsd"
                writers="sfgsdgsd"
                artists="sfgsdfgsdfg"
                spin-off="Msfgdgfsd">
                <TabNarrowVue>1</TabNarrowVue>
                <TabNarrowVue>1</TabNarrowVue>
                <TabNarrowVue>1</TabNarrowVue>
                <TabNarrowVue>1</TabNarrowVue>
              </TabsWrapperNarrowVue>

CodePudding user response：

define them in a single props object instead of defining a separate props object for each prop.

<template>
  <!-- component template -->
</template>

<script>
import { ref } from "vue";
import { provide } from "vue";

export default {
  setup(props, { slots }) {
    // component setup code

    return {
      // component data
    };
  },
  // Define all props in a single object
  props: {
    title: String,
    genre: String,
    originalRelease: String,
    platforms: String,
    developers: String,
    publishers: String,
    directors: String,
    writers: String,
    artists: String,
    prequel: String,
    sequel: String,
    spinOff: String
  },
  created() {
    // component created hook
  }
};
</script>

you can access the title prop in your template.

<script>
import { ref } from "vue";
import { provide } from "vue";

export default {
  setup(props, { slots }) {
    // component setup code

    return {
      // component data
    };
  },
  // Define all props in a single object
  props: {
    title: String,
    // Other props...
  },
  methods: {
    // Define a method that uses the title prop
    sayTitle() {
      console.log(this.title);
    }
  },
  created() {
    // Use the sayTitle() method in the created hook
    this.sayTitle();
  }
};
</script>