• vue子组件向父组件传值


    原理:

    父组件向子组件传方法,子组件想办法调用改方法(通过 this.$emit()触发父组件穿过来的方法),把子组件的数据当做该方法的参数传递进去,父组件就拿到了实参,得到了数据

    (子组件每当点击自己身上的button按钮,就会触发自己身上的myclick事件,在自身myclick方法里面通过 this.$emit('func', this.sonmsg)可以触发父组件传过来的func方法)

    父向子传方法:

     <div id="app">
        <!-- 父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了 -->
        <com2 @func="show"></com2>
      </div>
       var vm = new Vue({
          el: '#app',
          data: {
            datamsgFormSon: null
          },
          methods: {
            show(data) {
              // console.log('调用了父组件身上的 show 方法: --- ' + data)
              // console.log(data);
              this.datamsgFormSon = data
            }
          },

    子触发该方法

     <div>
          <h1>这是 子组件</h1>
          <input type="button" value="这是子组件中的按钮 - 点击它,触发 父组件传递过来的 func 方法" @click="myclick">
        </div>
     methods: {
            myclick() {
              // 当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func 方法,并调用这个方法???
              //  emit 英文原意: 是触发,调用、发射的意思
              // this.$emit('func123', 123, 456)
              this.$emit('func', this.sonmsg)
            }
          }

    子组件触发该方法的时候通过传参的形式,向父组件传了实参,父组件就接收到了子组件穿过来的数据

  • 相关阅读:
    .Proto 文件转换成.cs文件
    C# 委托和事件
    C# 对word (03、07)的相关操作
    程序中记录日志的封装类
    压缩文件程.ZIP
    xml和对象直接的序列化和反序列化
    C#判断两个日期是否在同一周,某日期是本月的第几周
    vs2008 C# 单元测试
    解压缩.zip文件
    记录一次曲折的维护-重构过程
  • 原文地址:https://www.cnblogs.com/ll15888/p/11252548.html
Copyright © 2020-2023  润新知