组件是什么

vue组件就是一个个独立的小型的ui模块，整个大型的系统就是由一个个小型的UI模块拼接而成的

vue组件就是vue实例，通过new Vue函数来创建的一个vue实例，不同的组件只不过是options的不同，我们基本百分之90的开发工作都是围绕options的配置来进行的

三大核心概念

属性、事件、插槽

属性

属性例子：

export default {
	name: "PropsDemo",
	// 不推荐使用这种做法，不利于维护
	// props: ['name', 'type', 'list', 'isVisible'],
	// 建议使用下面的做法来声明属性(使用对象的形式声明)
	props: {
		name: String,
		type: {
			validator: function(type) {
				// 这个值必须匹配以下字符串中的一个
				return ['success', 'warning', 'danger'].includes(value);
			}
		},
		list: {
			type: Array,
			// 对象或数组默认值必须从一个工厂获取
			default: () => []
		},
		isVisible: {
			type: boolean,
			default: false
		},
		// 不建议使用onChange来命名，会和语法冲突
		onChange: {
			type: Function,
			default: () => {}
		}
	}
}

属性使用方法
Props.vue文件内容如下：

<template>
    <div>
        name: {{ name }}
        <br>
        type: {{ type }}
        <br>
        list: {{ list }}
        <br>
        isVisible: {{ isVisible }}
        <br>
        <button @click="handleClick">change type</button>
    </div>
</template>

<script>
export default {
    name: 'PropsDemo',
    // 自动挂载属性
    inheritAttrs: false,
    props: {
        name: String,
        type: {
            validator: function(value) {
                return ["success", "warning", "danger"].includes(value);
            }
        },
        list: {
            type: Array,
            default: () => []
        },
        isVisible: {
            type: Boolean,
            default: false
        },
        onChild: {
            type: Function,
            default: () => {}    
        }
    },
    methods: {
        handleClick() {
            // 不可以这么做，会报错, 因为我们的属性是单向数据流的，不允许在子组件内更改父组件传递过来的值
            // this.type = "warning";
            console.log("触发")
            console.log("子组件的type是：")
            console.log(this.type)
            this.onChild(123)
        }
    }
}
</script>

App.vue文件使用如下：

<div>
    <Props
          name="Hello Vue!"
          :type="type"
          :is-visible="false"
          :on-child="handlePropChange"
          title="属性Demo"
          class="test1"
          :class="['test2']"
          :style="{ marginTop: '20px' }"
          style="margin-top: 10px;"
        />
  </div>

<script>
import Props from './components/Props.vue';

export default {
  name: 'App',
  components: {
    TodoItem,
    Props,
    // Event
  },
  data() {
    return {
      msg: "hello geek!",
      info: '',
      list: [],
      type: "success",
      name: "事件名"
    }
  },
  methods: {
    handleClick() {
        if (this.info != '') {
            this.list.push(this.info)
            this.info = ''
        }
    },
    handlePropChange(param) {
      console.log(param)
      console.log("父组件")
      if (this.type === "success") {
        this.type = "warning"
      } else {
        this.type = "success"
      }
      console.log("父组件的type")
      console.log(this.type)
    },
    handleEventChange() {

    }
  }
}
</script>

子组件中对属性进行了封装，全部在Props中，当父组件使用时，通过:属性名称的方式进行引用和赋值
子组件定义了一个函数的属性：onChild，在父组件使用这个属性时，也是和使用普通组件一样的方式，对onChild进行赋值，只不过赋的是函数，是的，函数也是作为参数来存在
此函数可以接收参数，是否接收参数，接收什么参数，取决于子组件对此函数的定义，可以看到子组件中有一个 handleClick方法，方法内部对onChild进行了调用，并传递参数123，当父组件的handlePropChange方法在接收函数时，也定义了一个参数用来接收(param)：

handlePropChange(param) {
      console.log(param)
      console.log("父组件")
      if (this.type === "success") {
        this.type = "warning"
      } else {
        this.type = "success"
      }
      console.log("父组件的type")
      console.log(this.type)
    }

事件

定义 Even.vue文件

<template>
    <div>
        name: {{ name || '--' }}
        <br>
        <input :value="name" @change="handleChange">
        <br/>
        <br/>
        <div @click="handleDivClick">
            <button @click="handleClick">重制成功</button>
            <button @click.stop="handleClick">重制失败</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'EventDemo',
    props: {
        name: {
            type: String
        }
    },
    methods: {
        handleChange(e) {
            console.log("改变1")
            this.$emit('change', e.target.value)
            console.log("改变2")
            console.log(e.target.value)
        },
        handleDivClick() {
            console.log("清空")
            this.$emit('change', '')
        },
        handleClick() {
            // 无论做什么都会失败！
            // e.stopPropagation();
        }
    }
}
</script>

父组件引用方法：

<Event :name="eventName"  @change="handleEventChange"/>

// 导入
import Event from './components/Event.vue';

// 方法定义
handleEventChange(param) {
  console.log("父组件接收到change事件")
  if (param?.target?.value) {
    this.eventName = param?.target?.value
    console.log(param?.target?.value)
  } else {
    this.eventName = ""
  }
}

子组件定义方法: handleChange，通过this.$emit('change', e.target.value)，调用change方法，传递当前输入框的值作为参数
父组件通过handleEventChange函数进行接收，并声明一个参数：param，通过param中的param?.target?.value来获取传递的参数值

插槽

组件文件夹内新建文件：Slot.vue

<template>
    <div>
        <slot />
        <slot name="title" />
        <slot name="item" v-bind="{ value: 'vue' }" />
    </div>
</template>
<script>
export default {
    name: "SlotDemo"
}
</script>

父组件引用部分：

<SlotDemo>
  <template v-slot:title>
    <p>title slot1</p>
    <p>title slot2</p>
  </template>
  <template v-slot:item="props">
    <p>item slot-scope {{ props }}</p>
  </template>
</SlotDemo>

// js引用
import SlotDemo from './components/Slot.vue';

子组件通过定义name="title"的插槽、name="item"的插槽，父组件通过v-slot:title和v-slot:item="props"来引用子组件定义的插槽

总结