目录
一、创建全局组件
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.父类
<template>
<div id="app">
<my-pan :msg="msg" :arr="arr" :obj="obj" :hander="hander"></my-pan>
//字符串 //数组 //对象 //函数
</div>
</template>
<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.子类
<template>
<div>
<h2>{
{ msg }}</h2>
<h2>{
{ arr }}</h2>
<h2>{
{ obj }}</h2>
<button @click="hand">点击</button>
</div>
</template>
<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>