vue3 自定义组件

vue3 自定义组件教程,自定义组件在任何一个系统中都是一个基石般的存在，自定义组件可以将业务模块快，把复杂的功能拆分成小的单元进行开发，可以降低开发难度和提高开发效率，我们如果把软件开发比成造车的话，那么通俗的可以理解成，造发动机的负责造发动机、造轮子的负责造轮子，各司其职，在vue的页面也是组件。

基础概念

名词	作用说明
props	自定义组件的属性，比如大小、颜色，用来传值的其中一种方式
events	自定义事件，比如把附自定义组件的点击事件传给父组件，也可以通过这种方式把值传出来
slots	插槽，可以理解成占位符，把位置留出来，由使用这个自定义组件的人决定塞什么东西进去
expose	定义外面可访问的数据
v-model	自定义组件的双向绑定，父组件对象与子组件数据对象进行双向绑定
provide	传值给子组件和props属性不同，他可以传递给多层嵌套的子组件（子组件、孙组件）
inject	子组件或者孙组件获取父组件传入的值

简单例子（Setup 组合式）

子组件 sku.vue 的代码，本例子演示：属性、双向绑定、自定义事件

<template>
  <div class="itxst">
    <p :style="{ color: color, fontSize: fontSize + 'px' }">我是子组件</p>
    <input class="btn" @click="update" type="button" value="修改颜色" />
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
/*
 * 定义组件的属性
 * type 表示属性类型
 * default 表示默认值
 */
const props = defineProps({
  fontSize: {
    type: Number,
    default: 14,
  },
  color: {
    type: String,
    default: "#000",
  },
});

/*
  也可以通过数组方式定义属性,缺点是不能定义类型和默认值
  const props = defineProps(['msg','color']);
*/

//修改属性的值,定义emits可修改color属性
const emits = defineEmits(["update:color", "update:fontSize"]);

// <demo  v-model:color="parentColor" :fontSize="15"/>
const update = () => {
  //把颜色改成黑色
  emits("update:color", "red");
  //父组件fontSize没有使用v-model,所以下面代码无法修改fontSize值
  emits("update:fontSize", 20);
};
</script>
<style scoped>
</style>

父组件使用自定义组件 sku

<template>
  <!-- 注意使用了 v-model和 parentColor变量  -->
  <demo v-model:color="parentColor" :fontSize="15" />
</template>
<script setup>
  import { ref, reactive } from "vue";
  // 导入组件,因为是setup语法糖，所以无需手动注册组件
  // demo为组件名称,你可以随便取名， "./components/sku.vue" 是组件的路径
  import demo from "./components/sku.vue";
  //定义变量
  const parentColor=ref('#666');
</script>

在线试一试

简单例子（选项式）

子组件 sku.vue 非 Setup 模式的代码，本例子演示：属性、双向绑定、自定义事件

<template>
  <div class="itxst">
    <p :style="{ color: color,fontSize:fontSize+'px' }">我是子组件</p>
    <input class="btn" @click="update" type="button" value="修改颜色" />
  </div>
</template>
<script>
/*
 * setup函数模式下 自定义组件例子
 * 本例子演示：父组件可以隐藏子组件，子组件也可以隐藏自己
 */
export default {
  name: "propsdemo",
  props: {
    fontSize: {
      type: Number,
      default: 14,
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  methods: {
    //修改属性的值 <demo  v-model:color="parentColor" :fontSize="15"/>
    update: function () {
      this.$emit("update:color", "red");
      //父组件fontSize没有使用v-model,所以无法修改fontSize值
      this.$emit("update:fontSize", "20");
    },
  },
};
</script> 
<style scoped>
</style>

父组件使用自定义组件 sku

<template>
  <!-- 注意使用了 v-model和 parentColor变量  -->
  <demo v-model:color="parentColor" :fontSize="15" />
</template>
<script>
import demo from "./components/sku.vue";
export default {
  name: "app",
  //注册组件
  components: {
    demo,
  },
  data() {
    return {
      parentColor: "#666",
    };
  },
};
</script>

在线试一试