what I want to do is to send a value to the file "Notification.vue" when the button is clicked in the hello word file and I want to show Notification

toastify

helloword.vue

<template>
        <button @click="toast">Toast it!</button>
</template>
<script>
export default {
        name: "helloword",
        methods: {
                toast() {

                }
        }
}
</script>

Notification.vue

<script setup>
import {createToast} from 'mosha-vue-toastify';

import 'mosha-vue-toastify/dist/style.css'

const props = defineProps({title: String})
const toast = () => {
        createToast(props.title)
}

</script>

CodePudding user response：

I just created a demo with Vue 2 for your understanding how components will communicate. You can migrate this in Vue 3.

Demo :

Vue.use(VueToast, {
  // global options
});

Vue.component('notification', {
  props: ['title'],
  mounted() {
    if (this.title) {
      this.$toast.open({
        message: this.title,
        type: "success",
        duration: 5000,
        dismissible: true
      })
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    title: null,
  },
  methods: {
    toast: function() {
      this.title = 'Welcome!'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme-sugar.css"/>
<div id="app">
  <button @click="toast">Toast it!</button>
  <notification v-if="title" :title="title"></notification>
</div>