Vue中使用mixin扩展组件功能的基本步骤

// MyMixin.js
export default {
  methods: {
    myMethod() {
      // 组件方法逻辑
    }
  }
}

// MyComponent.vue
import { MyMixin } from './MyMixin.js'

export default {
  mixins: [MyMixin], // 引入mixin
  // 其他组件配置
}

export default {
  methods: {
    sayHello() {
      console.log('Hello from mixin!');
    },
    myMethod() {
      // 组件方法逻辑
    }
  }
}

<template>
  <div>
    <button @click="sayHello">Say Hello</button>
    <my-mixin></my-mixin> <!-- 使用 mixin -->
  </div>
</template>

<script>
import MyMixin from './MyMixin.js'

export default {
  mixins: [MyMixin], // 引入 mixin
  methods: {
    myMethod() {
      // 组件方法逻辑，使用了 mixin 中的 myMethod 方法
    }
  }
}
</script>

npm install vue-class-component

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import Vue from 'vue';
import MyComponent from './MyComponent.vue'; // 导入你的类组件

export default {
  name: 'App',
  components: {
    MyComponent, // 将类组件添加到全局组件列表中
  },
  data() {
    return {
      message: 'Hello Vue Class Component!',
    };
  },
};
</script>

<script>
export default class MyComponent extends Vue {
  constructor(options) {
    super(options); // 调用父类的构造函数
    // 在这里可以设置组件的初始状态等其他操作
  }
}
</script>

export default class MyComponent extends Vue {
  constructor(options) {
    super(options); // 调用父类的构造函数
    this.message = 'Hello World!'; // 设置初始状态为'Hello World!'
  }
}

<template>
  <div>
    <parent-component @child-event="handleChildEvent"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleChildEvent(event) {
      // 处理子组件的事件
    }
  }
}
</script>

<template>
  <div>
    <parent-component @child-event="this.$emit('child-event', event)">
  </div>
</template>

npm install vue-router

yarn add vue-router

import Vue from 'vue';
import VueRouter from 'vue-router';

// 导入你的组件
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

// 使用vue-router的命名空间（可选）来防止组件命名冲突
const router = new VueRouter({
  base: process.env.BASE_URL, // 如果使用环境变量提供的基础路径
  mode: 'history', // 使用HTML5 history模式进行路由
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入你的路由配置文件

new Vue({
  router, // 使用路由对象作为routes选项的子选项
  render: h => h(App), // 使用路由器渲染组件
}).$mount('#app'); // 挂载到id为'app'的元素上

this.$router.push('/about?id=123'); // 跳转到about页面，并传递id参数为123

export default {
  computed: {
    id() {
      return this.$route.query.id; // 获取传递的id参数值
    },
  },
};