vue踩坑笔记02---组件和全局组件的注册、使用

vue踩坑笔记02---组件和全局组件的注册、使用

组件:

vue中,每一个.vue结尾的文件都是一个组件,我们直接通过import关键字,就可以使用。
举例说明。

<template>
  <div>
    <!-- 第三步:通过标签将组件渲染到页面 -->
    <apple></apple>
    <banana></banana>
  </div>
</template>

<script>
// 第一步:先导入组件
import myApple from '@/components/fruit/apple.vue'
import banana from '@/components/fruit/banana.vue'

export default {
  // 第二步:定义组件
  components: {
    // 第一项为定义的组件名,也就是要使用的标签,第二项为引入的组件
    'apple': myApple,
    // 如果两项相同时,可使用简写
    banana
  }
}
</script>

所以组件的使用方法是“先导入,后定义,再使用”。

全局组件:

在每个地方使用同一个组件都要经过以上步骤,这样就比较麻烦。
如果一个组件在多个地方都要使用,我们可以将该组件定义为全局组件。
也就是说,只需要定义一次,就可以随意使用。
举例说明。
定义一个global.js文件,用来接收所有的全局组件

// 导入组件
import myApple from '@/components/fruit/apple.vue'

export default (Vue) => {
  // 注册组件
  // 使用Vue.component()注册组件时,全局id自动作为组件的名称
  // 也就是说,此时第一参数为组件的名称
  Vue.component('apple', myApple)
}

再在入口文件main.js导入global.js文件

// 导入global.js
import global from '@/globalComponents/global.js'

// 使用全局组件
Vue.use(global)

在任意组件中直接使用定义好的全局组件

<apple></apple>

骚操作:
自定义的全局组件中可以调用自己吗?
不可以,会报错

Error in nextTick: "RangeError: Maximum call stack size exceeded"

个人学习总结,欢迎批评指正

发布了19 篇原创文章 · 获赞 4 · 访问量 3210
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览