Vue组件通信之父传子与子传父深入探究

是张鱼小丸子鸭 2022-12-05 我要评论

为什么要组件拆分

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

组件拆分的流程

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

在父组件中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>

在props中接收父组件中传递过来的值

子传父

流程简介：

先在子组件中定义一个方法，方法中调用emit方法

emit方法有两个参数，第一个参数是自定义事件，第二个参数是要传递的参数

父组件中，子组件的标签上绑定一个事件，调用自定义方法，方法的形参就是传递的数据

子组件

<template>
    <div>
    <ul>
    <li v-for="(item,index ) in list" :key="index" @click="select(item)">{{item}}</li>
  </ul>
    </div>
</template>
<script>
export default{
//父传子接受子组件中的数据，渲染到页面
    props:{
        list:{
            type:Array,
        }
    },
    setup(props,{emit}){
//点击触发select方法
        const select=(item)=>{
            console.log(item);
            // 会把数据传递给父组件中
            emit('sel',item)
        }
        return {select}
    }
}
</script>

父组件

<template>
  <input type="text" placeholder="请输入你喜欢的明星">
  <List :list="list" @sel="sel" ></List>
</template>
<script>
import { reactive } from 'vue'
import List from '../views/List.vue'
export default {
    name:'hello',
    components:{List},
    setup(){
        let list=reactive(['蔡徐坤','张云龙','秦霄贤','烧饼'])      
        const sel=(data)=>{
            console.log(data);
        }
        return{
           list,sel
        }
    }
}
</script>

provide和inject方法

provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据

传递数据的组件

<template>
  <div>
    <h3>{{name}}</h3>
    <Son></Son>
  </div>
</template>
<script>
import Son from '../views/Son.vue'
import { provide,reactive } from 'vue'
export default {
    components:{
        Son
    },
    setup(){
        let name=reactive('张三')
        provide('name',name)
        return {
            name
        }
    }
}
</script>

子组件

<template>
  <div>
    <Son1></Son1>
  </div>
</template>
<script>
import Son1 from '../views/Son1.vue'
import {inject} from 'vue'
export default {
    components:{
        Son1
    },
    setup(){
        let name=inject('name')
        console.log(name);
        return {name}
    }
}
</script>

孙子组件

<template>
  <div>
    <h3>{{names}}</h3>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
    setup(){
        let names=inject('name')
        return {names}
    }
}
</script>

组件通信的双向绑定

在组件通信的传递属性的时候增加个v-model指令v-model:username=“Name"
子组件中文本框接受数据，绑定事件$emit("update:username",传递更新的值)

v-model 和$emit() 中update配合使用

vue3中去掉了.native修饰符，所以说子传父的过程中无法辨别自定义事件是否原生事件，如果我们emit传递的事件是原生js事件名的话，这个时候父组件中事件可能会多次执行

这个时候可以在子组件中增加emits属性配置，配置子组件向父组件传递或者定义的自定义事件

父组件

<template>
  <div>
    <input type="text" class="inp" v-model="username"/> 
    <Son v-model:username="username"></Son>
  </div>
</template>
<script>
import Son from '../views/Son.vue'
import { reactive } from 'vue'
export default {
    components:{
        Son
    },
    setup(){
        let username=reactive('')
        return {
           username
        }
    }
}
</script>

子组件

<template>
    <div>
        <input type="text"  :value="username" @input="(e) => $emit('update:username', e.target.value)" />
    </div>
</template>
<script>
import { inject } from 'vue'
export default {
    props: ["username"],
    setup() {
    }
}
</script>