vue-07-父子组件传值

Bertha 。 2023-05-22 06:46 3阅读 0赞

因为vue 的数据是单向流动的，这是为了避免数据污染。在官方文档中也说到：所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

大致归纳一下：父传子--传值、子传父--传事件

1、父传子

如果传递的数据是对象格式的，那么在子组件 内部监听 watch  的时候，需要使用深度监听，也就是添加 deep ： true ，也就是下面的子组件的监听方式，如果是别的格式的，例如，字符串、数字、布尔值、 数组格式等，那就是普通监听就好了

父组件代码：在父组件中 通过 v-bind 的缩写形式  :listData='listData'   绑定了data 内部的数据，第一个  listData 只是一个名字，为了方便辨认，所以写的相同。 第二个 listData  则是 data 内部的数据

<template>
      <div>
        <h3>我是father</h3>
        <Children :listData='listData' :xxx='xxx' :listObj='listObj'></Children> 
        //子组件传递了一个数组、一个字符串、一个对象
      </div>
    </template>
    
    <script>
    import Children from './children'  //引入子组件
    export default {
      data () {
        return {
          xxx:'123',
          listData: [{
              id: 1,
              name: "TCL彩电",
              price: 1000,
              num: 1,
              img: "../../../assets/a.jpg"
            }],
          listObj: {
              name: "aaa",
              age: 18
          }
        }
      },
      components : {
        Children //注册子组件
      },
    }
    </script>

子组件代码：

1、通过 props  接收父组件传递过来的数据，规范要求写出数据的类型以及默认值，如果数据是数组或对象形式的，需要使用函数返回，不然控制台会报错。

2、props 接收数据之后，需要使用数据，这个时候需要用到  watch  监听器。对象监听需要用到 deep 深度监听，如果需要组件第一次进来之后就开始监听数据，那么需要 添加 immediate: true

<template>
      <div>
        <h3>我是children</h3>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        listData: {
          type: Array,
          default: () => []
        },
        xxx:{
          type:String,
          default : ''
        },
        listObj:{
          type: Object,
          default: () => {}
        }
      },
      watch: {
        listData:{
          handler(n,o) {
            console.log(n,o)
          }
        }，
        xxx:{
          handler(n) {
            console.log(n)
          }
        },
        listObj:{
          handler(n,o) {
            console.log(n,o)
          },
          deep: true,
          immediate: true,
        }，
      }
    };
    </script>

2、子传父--传事件：

在子组件中注册的方法，必须写在 父组件中 引用 的子组件上，否则无效 ，下面的例子上就是 在子组件 header 上注册的事件 ， 写在了 父组件 中 引用子组件的 <app-header></app-header> 上

*  this.$emit("注册的事件名","传的内容") 
 *  在父组件标签里绑定自定义事件 v-on:titleChanged="updateTitle()" 自定义的事件名字要和子组件中注册的事件名要一样
 *  在父组件 methods 中，编写 updateTitle 方法
 *  整体逻辑是：

当点击子组件中的header标签时

![20200416163629403.png][]

触发changeTitle方法

![20200416163755230.png][]

触发这个方法后会发现通过  $emit  注册了一个事件 叫titleChanged，并且传递了一个参数叫 （子向父组件传值），就会去父组件里找，找到了titleChanged事件，它要执行一个叫updateTitle的方法

![20200416164241470.png][]

就会去事件里找updateTitle事件

![20200416164321622.png][]

改变当前父组件的  title

![20200416164423883.png][]

改变了之后，通过 v-bind绑定的 title，就会跟着改变，此时，title 的值就是 子组件传递过来的值（子向父组件传值）

[20200416163629403.png]: /images/20230521/27875264ba834b7281bbde24bebd7f09.png
[20200416163755230.png]: /images/20230521/0ca72d32d583444c82dc6dbc39af87b6.png
[20200416164241470.png]: /images/20230521/f1b0b6affe344623a1ceb03891be6d30.png
[20200416164321622.png]: /images/20230521/619c2399d1654b42bbf81c6e7ffe7a89.png
[20200416164423883.png]: /images/20230521/abcf7f37958d45faa8c9fb0eadf3bf93.png