[JavaScript知识库]uniapp创建全局组件

uniapp的写法其实跟vue是差不多的,下面以定义一个缺省页为例子

1、先创建一个子组件（noneData.vue）

<template>
  <view class="none-content">
    <image src="/static/img/none.png" class="none-icon" />
    <view class="tip">{{ tip }}</view>
  </view>
</template>

<script>
export default {
  props: {
    tip: {},
  },
};
</script>

这里的tip是父组件的传值

如果这个只是一个组件的父组件，那么可以直接在父组件进行引入

import noneData from "../../components/nonedata/nonedata.vue"

  components: {
    noneData
  },

如果这个子组件在多个页面都会使用到，此时应该考虑把这个组件变成全局的组件，操作方法如下

1、修改main.js

// 引入组件
import noneData from './components/nonedata/nonedata.vue'

//注册全局组件  
Vue.component('none-data', noneData);

2、使用
?

  <none-data v-else tip="暂无数据"></none-data>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖