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"]);/* 确认按钮  点击然后用自定义事件用来传给父组件一些有用的信息 */constenter=()=>{// 传给父组件 可以添加参数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";// 接收子组件传过来的参数constsubmit=(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",},]);// 接收子组件传过来的参数constsubmit=(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"]);/* 添加按钮 */constaddInput=()=>{let inputsList = inputList.value;if(inputsList.length >=4){alert("至多只能填写四个");return;}
  inputList.value.push({value:"",});};/* 删除按钮 */constdelInput=()=>{let inputsList = inputList.value;if(inputsList.length <=1){alert("至少要填写一个");return;}
  inputsList.pop();};/* 确认按钮  用自定义事件用来传给父组件一些有用的信息 */constenter=()=>{const isHaveEmpty = inputList.value.find((item, index)=>{return item.value ==="";});if(isHaveEmpty){returnalert("输入框不能为空！");}// 传给父组件 可以添加参数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>