vue全局组件和局部组件的写法

               

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 defaultcomponents: {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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值