vue3组件通信使用

目录

首先，我们先了解为什么要组件拆分？

组件拆分的流程？

子组件中为什么要使用defineComponent方法？

 父传子

父组件

子组件

子传父

子组件

父组件

provide和inject方法

传递数据的组件

子组件

孙子组件

组件通信的双向绑定

 父组件

子组件

首先，我们先了解为什么要组件拆分？

        组件拆分的目的就是为了让我们复用代码，节省我们的代码量，把共同的功能封装到一个组件中，然后在各个组件中使用

组件拆分的流程？

        首先，把要拆分的数据单独拆分到一个文件中，作为子组件

        在父组件中import导入子组件，components进行组件的注册

        父组件使用注册子组件的标签

子组件中为什么要使用defineComponent方法？

        语法严谨主要是用来检测ts的语法结构的

 父传子

流程简介：

先在父组件中的子组件上绑定一个自定义属性

子组件中通过props接收数据，可以验证数据类型，设置默认值

接收的数据可以直接使用

父组件

<template> 
  <input type="text" placeholder="请输入你喜欢的明星">
  <List :list="list" ></List>
</template>

<script>
import {reactive } from 'vue'
import List from '../views/List.vue' //引入子组件
export default {
    name:'hello',
//手动挂载子组件
    components:{List},
    setup(props,context){   
        let list=reactive(['蔡徐坤','张云龙','秦霄贤','烧饼'])
//return返回
        return{
           list
        }
        

    }
}
</script>

子组件

<template>
    <div>
    <ul>
    <li v-for="(item,index ) in list" :key="index">{
  {item}}</li>
  </ul>
    </div>
</template>

<script>
export default{
    props:{
        list:{
            type:Array,
        }
    },
    setup(){
        
    }
}
</script>