vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法:在项目的main.js中:
import Vue from 'vue';import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();Vue.component('my-component', MyComponent); //初始化组件new Vue({ el: '#app', router, components: { App, MyComponent }, template: '<App/>',});
局部组件引入写法:在需要使用组件的a.vue文件中:
<template></template><script>import MyComponent from '@/components/MyComponent.vue';export default { components: {MyComponent}, // 直接初始化就可以啦,不需要Vue.use(); data() {}, methods: {}};</script><style lang="scss" scoped></style>
下面附上自定义组件的MyComponent.vue文件代码:
<template> <div> <a @click="methods1()"></a> </div></template><script>import { MessageBox } from 'mint-ui';export default { data () { // 组件内参数定义在data中 return { data1: {} }; }, props: { // 组件传参使用props value1: String, value2: Number }, methods: { // 组件的计算方法 methods1 () { } }};</script><style lang="scss" scoped></style>
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow