父子间的传值问题

最新推荐文章于 2024-09-10 09:55:59 发布

起个名难死

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量76

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_71104826/article/details/128525226

版权

文章讲述了在Vue.js中如何进行父子组件间的数据传递。父组件通过props向子组件传递值，子组件则通过调用$emit方法触发自定义事件来将值回传给父组件。在父组件中注册事件监听器，然后在子组件中触发事件并传递参数，实现双向通信。

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

父组件传值子组件

只需要记住一句话：父组件的字标签给子组件传值
子组件的props属性用来可以接受父组件的传值然后给传来的值设置数据类型
props与data、methods平级

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

子组件传值父组件

子组件调用父组件：

在父组件中给引用的子组件注册一个事件

子组件给父组件传递数据：

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

父组件如何获取内容呢：

在父组件的方法中获取

<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)
        }
      }
    })