VUE工程化--vue组件注册

组件注册的两种方式:
1. 局部注册:只能在注册的组件内使用
2. 全局注册:所有组件内都能使用

 局部注册步骤:

        1、导入

import MyHeader from "./components/myHeader.vue";
import MyMain from "./components/myMain.vue";
import MyFooter from "./components/myFooter.vue";

        2、注册组件--注册成html标签(components中)

export default {
  components: {
    MyHeader,
    MyMain,
    MyFooter,
  },
};

        3、页面中使用标签

实现效果:

VUE工程化--vue组件注册_第1张图片 

全局注册步骤(main.js):

        1、导入组件

import MyButton from "./components/myButton.vue";

        2、全局注册组件 

// Vue.component('标签名',导入的变量名)
Vue.component("MyButton", MyButton);

        3、页面中使用标签

  

结果如下:

VUE工程化--vue组件注册_第2张图片

你可能感兴趣的:(VUE基础,vue.js,前端,javascript)