vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子，子传父。
前提：用的是vue3版本且使用了setup语法糖 <script setup> .....<script>

1，组件注册

1.1，全局注册：

全局注册需要在 在main.js中进行注册；
全局注册的组件可以在此应用的任意组件的模板中使用；

import { createApp } from "vue";
这是两个组件
import InputList from "@/components/component/Input.vue";
import Footer from "@/components/component/Footer.vue";

const app = createApp(App);
可以进行链式注册
app.component('InputList',InputList).component('Footer',Footer)

1.2，局部注册

<script setup>
import { reactive, ref, createApp } from "vue";
/* 组件局部注册 */
const app = createApp({});
import InputList from "@/components/component/Input.vue";
app.component({
  InputList,
});
</script>

2，组件通信

2.1，父传子

组件传值和vue2的原理是一样的，用自定义属性进行传值；
在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明：

父组件：

<script setup>
import { reactive, ref, createApp } from "vue";
/* 父组件需要传给子组件的值 */
const inputList = ref([
  {
    name: "胡桃",
    age: 18,
    value: "112222222222",
  },
  {
    name: "行秋",
    age: 20,
    value: "1333333333333",
  },
  {
    name: "钟离",
    age: 5000,
    value: "14444444444444",
  },
]);
</script>

<template>
  <div class="demo">
    <h3>组件使用:</h3>
    <InputList foo="aaa" :phoneList="inputList" @submit="submit" />
  </div>
</template>

可以看到这里使用了 InputList 组件，传了一个字符串(aaa)和一个数组(inputList);
注意： 自定义属性如果前面不加冒号(:)会默认你传的是一个字符串，加上冒号才说明你在此处引用的是一个变量；

子组件：

子组件可以更细致地声明对传入的 props 的校验要求，是否必传，是否有默认值；
接收对象或数组的默认值 必须从一个工厂函数返回才可以使用；

<script setup>
/* 这种形式是针对 setup语法糖的写法
 * 允许接收多个属性
 */
const props = defineProps({
  // foo是我从父元素传进来的字符串
  foo: {
    type: String, //类型约定
    required: false, //是否必传
    default: "bbb", // 默认值 不传的时候触发 传空字符也不会触发
  },

  /* phoneList 是一个数组
    对象或数组的默认值
    必须从一个工厂函数返回。 
    该函数接收组件所接收到的原始 prop 作为参数
    */
  phoneList: {
    type: Array,
    required: true,
    // 父组件不传则会使用下面的值
    default(Props) {
      return [
        {
          name: "胡桃",
          age: 18,
          value: "112222222222",
        }
        ....
      ];
    },
  },
});
console.log("props:", props);
</script>

2.2，子传父

在子组件的模板中，可以直接使用 $emit 方法触发自定义事件进行传值；如图所示：

子组件：

<script setup>
import { reactive, ref } from "vue";

/* 我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用： */
const emit = defineEmits(["submit"]);

/* 确认按钮  点击然后用自定义事件用来传给父组件一些有用的信息 */
const enter = () => {
  // 传给父组件 可以添加参数
  emit("submit",inputList.value);
}
</script>
<template>
  <div class="demo">
      <div class="submit"><button @click="enter">确 认</button></div>
    </div>
  </div>
</template>

父组件：

<script setup>
import { reactive, ref, createApp } from "vue";
// 接收子组件传过来的参数
const submit = (params) => {
  console.log("params", params);
};
</script>

<template>
  <div class="demo">
    <h3>组件使用:</h3>
    <InputList foo="aaa" :phoneList="inputList" @submit="submit" />
  </div>
</template>

3，所有代码

这里是当前案例的所有代码,还不太懂的话可以在看一下；

父组件：

<script setup>
import { reactive, ref, createApp } from "vue";
/* 组件局部注册 */
const app = createApp({});
import InputList from "@/components/component/Input.vue";
app.component({
  InputList,
});

/* 父组件需要传给子组件的值 */
const inputList = ref([
  {
    name: "胡桃",
    age: 18,
    value: "112222222222",
  },
  {
    name: "行秋",
    age: 20,
    value: "1333333333333",
  },
  {
    name: "钟离",
    age: 5000,
    value: "14444444444444",
  },
]);

// 接收子组件传过来的参数
const submit = (params) => {
  console.log("params", params);
};
</script>

<template>
  <div class="demo">
    <h3>组件使用:</h3>
    <InputList foo="aaa" :phoneList="inputList" @submit="submit" />
  </div>
</template>

<style></style>

子组件：

<script setup>
import { reactive, ref } from "vue";
import "./Input.css";

/* 这种形式是针对 setup语法糖的写法
 * 允许接收多个属性
 */
const props = defineProps({
  // foo是我从父元素传进来的字符串
  foo: {
    type: String, //类型约定
    required: false, //是否必传
    default: "bbb", // 默认值 不传的时候触发 传空字符也不会触发
  },

  /* phoneList 是一个数组
    对象或数组的默认值
    必须从一个工厂函数返回。 
    该函数接收组件所接收到的原始 prop 作为参数
    */
  phoneList: {
    type: Array,
    required: true,
    // 父组件不传则会使用下面的值
    default(Props) {
      return [
        {
          name: "胡桃",
          age: 18,
          value: "112222222222",
        },
        {
          name: "行秋",
          age: 20,
          value: "1333333333333",
        },
        {
          name: "钟离",
          age: 5000,
          value: "14444444444444",
        },
      ];
    },
  },
});
console.log("props:", props);

/* 这里对数据做一些拷贝 拷贝之后的数据也是响应式的 因为用的是ref */
const inputList = ref(props.phoneList);

/* 我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用： */
const emit = defineEmits(["submit"]);

/* 添加按钮 */
const addInput = () => {
  let inputsList = inputList.value;
  if (inputsList.length >= 4) {
    alert("至多只能填写四个");
    return;
  }
  inputList.value.push({
    value: "",
  });
};

/* 删除按钮 */
const delInput = () => {
  let inputsList = inputList.value;
  if (inputsList.length <= 1) {
    alert("至少要填写一个");
    return;
  }
  inputsList.pop();
};

/* 确认按钮  用自定义事件用来传给父组件一些有用的信息 */
const enter = () => {
  const isHaveEmpty = inputList.value.find((item, index) => {
    return item.value === "";
  });
  if (isHaveEmpty) {
    return alert("输入框不能为空！");
  }
  
  // 传给父组件 可以添加参数
  emit("submit",inputList.value);

};
</script>

<template>
  <div class="demo">
    <p>This is a input 组件</p>
    <div class="input">
      <div class="-btn">
        <button class="btn" @click="addInput">点击添加</button>
        <button class="btn" @click="delInput">点击删除</button>
      </div>
      <div class="inpContainer">
        <input
          type="text"
          v-for="item in inputList"
          :key="item.name"
          v-model="item.value"
          class="inp"
        />
      </div>
      <div class="submit"><button @click="enter">确 认</button></div>
    </div>
  </div>
</template>
<style>
.input .-btn {
  width: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 30px;
}
.btn {
  cursor: pointer;
  margin-left: 10px;
}

.inpContainer {
  display: inline-block;
  width: 50%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.inp {
  width: 180px;
  height: 30px;
  margin: 5px 10px;
}
.submit{
  cursor: pointer;
  margin-left: 10px;
}
</style>