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

目录

• 为什么要组件拆分
• 组件拆分的流程
• 子组件中为什么要使用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>

在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>

到此这篇关于Vue组件通信之父传子与子传父深入探究的文章就介绍到这了,更多相关Vue组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！