vue父子组件传值

CHUAIXYu

已于 2023-12-18 21:25:00 修改

阅读量69

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2023-01-01 16:15:01 首次发布

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128512887

版权

文章讲述了在Vue.js中如何通过props从父组件向子组件传递数据，以及子组件如何通过$emit触发自定义事件并传递数据回父组件。在父组件中注册事件监听器，并在子组件中调用$emit方法可以实现通信。示例代码展示了具体的实现过程。

摘要由CSDN通过智能技术生成

父组件传子组件

设置props属性就可以接受父组件的传值
props与打他、methods平级

props: {
        //自定义参数
        type: String,
        // 定义多种类型
        size: [Number, String],
        pageNum: [String, Number],
      },

子组件传父组件

子组件调用父组件的方法

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit(‘事件名字’)

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容

在父组件中怎么拿到这内容

父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
父组件有自定义参数，可以传入$ event也可以拿到子组件传递的数据。通过$event只能传递第一个参数

<template id="father">
    <div>
      我是父组件
      <son @toBa="toba($event,2)"></son>  <!-- 1.在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） -->
    </div>
  </template>

  <template id="son">
    <div>
      <button @click="toba">子传父</button>  
      我是子组件
    </div>
  </template>

Vue.component('father', {
      template: '#father',
      methods: {
        toba(data, params) {     
          console.log(data,params);
          console.log(params);
          console.log(event);
        }
      }
    })

Vue.component('son', {
      template: '#son',
      methods: {
        toba() {
          //2. 子组件可以触发这个事件$emit('事件名字')
          // 第一个参数：自定义事件名  第二个参数：要传递的参数
          this.$emit('toba', { name: 'cxy' },1)
        }
      }
    })

输出结果：
在这里插入图片描述