目录

一、创建全局组件

二、创建局部组件 

 三、父组件向子组件传递方法

---

一、创建全局组件

1.首先搭建脚手架，并运行，确保搭建成功。

2.创建两个vue文件，CompreHensive.vue文件作为创建全局变量使用，OneSided.vue作为局部变量使用(特别注意使用驼峰命名法，不然容易报错)。

3.在创建全局变量前要在main.js中配置配置全局变量,在进行全局注册组件时变量名要用-隔开或者使用驼峰命名法。

 4.再创建的CompreHensive.vue文件，template里面写html内容，script里面写js内容，style里面谢css样式，进行js命名时要用驼峰命名法。

5.使用在App.vue父类中使用。

 6.运行...

​ 全局组件，可以在多个vue实例中使用，类似于全局变量。 

二、创建局部组件 

1.跟全局组件前两步一样，然后在App.vue中注册组件，使用。

 

 2.局部组件全部在父类中注册使用。

 

 3.运行...

 局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。 

 三、父组件向子组件传递方法

1.父类

 
<script>
import MyPan from "@/components/OneSided.vue"; 
export default {
  name: "App",
  data() {
    return {
      msg: "父组件向子组件传递方法",
      arr: [2, 4, 6, 8],
      obj: {
        name: "张三",
        age: 18,
        sex: "男",
      },
    };
  },
  components: {
    MyPan,
  },
   methods: {
    hander(){
        console.log('被点击');
    }
  },
};
script>
<style>
style>

2.子类

<script>
export default {
  name: "MyCpn",
  props: {
    msg: {
      type: String,  //字符串
    },
    arr: {
      type: Array,  //数组
    },
    obj: {
      type: Object,  //对象
    },
    hander: {
      type: Function,   //函数
    },
  },
  methods: {
    hand() {
      this.hander();
    },
  },
 
  // props:['msg'],
};
script>
<style scoped>
h2 {
  color: red;
}
style>