javascript - Inherit props and functions from vue parent instance

Question

I am trying to define some default props and functions in my vue instance that i want to reuse in all of my components. How do i go about doing this? I have tried to pass the props but since they are read only it wont work.

Am i approaching this in the right way or should i look at another way?

// vue.js
import { createApp } from 'vue';
import Page from './vue-instances/Page';

const Vue = createApp({
 data() {
  return {
    loading: false // default prop
  };
 },
 components: {
   Page
 }
});
Vue.mount('#vue-app');

---

// Page.vue
export default {
 props: { loading: Boolean },
 data() {
   return {
     title: 'New Page',
   };
 },
 mounted: function () {
   setTimeout(() => {
     this.loading = true; // Reuse inherited props 
   }, 1000);
 }
};

标签： javascriptvue.jsvuejs3

Answer 1

我认为你的方法不是最好的。如果您尝试出于某种目的重用数据（上述道具），请尝试创建一个使用该数据的组件并重用该组件，这将是一种更自然和内联的 UI 开发方式。