vue3 setup emit with function click

Question

i want to run a method when emitting how can i get it? When handleShow(depth is clicked), I want to run collapsed in the medhod in the setup. or
I want to trigger the function I will write in setup

<MenuLink
        :link="items"
        :key="items.title"
        @click.stop="handleShow(depth)"
    />
<script>
import {ref} from "vue"
import MenuLink from "./MenuLink";

export default {
  name: 'MenuItems',
  components: {MenuLink},
  props: {
    items: {type: Object, required: true},
    depth: {Number},
    selected: {Number},
  },
  data() {
    return {
      opensCollapsed: false
    };
  },

  methods: {
    collapsed(dep) {
      console.log(dep)
    }
  },
  setup(props, {emit}) {
    const showDropdown = ref(false);

    const handleShow = (depth) => {
      emit('clicked', depth)
    }
    return {
      showDropdown,
      handleShow,
    }
  },

};
</script>

Answer 1

emit should only be used if you want to get an event out of your component to its parent (for example, if your component is a custom button and you want its parent to specify what would happen when clicking on it). Otherwise, you can write the code you want inside of handleShow instead of calling emit. You can also change the function name to whatever you want, just make sure it's the same inside the setup method and in the @click.stop property. In your case (since you just console.log the result):

<MenuLink
        :link="items"
        :key="items.title"
        @click.stop="handleShow(depth)"
    />
<script>
import {ref} from "vue"
import MenuLink from "./MenuLink";

export default {
  name: 'MenuItems',
  components: {MenuLink},
  props: {
    items: {type: Object, required: true},
    depth: {Number},
    selected: {Number},
  },
  data() {
    return {
      opensCollapsed: false
    };
  },
  setup(props, {emit}) {
    const showDropdown = ref(false);

    const handleShow = (depth) => {
      console.log(depth)
      // do whatever you want here
    }
    return {
      showDropdown,
      handleShow,
    }
  },

};
</script>