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

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

原文地址:https://www.cnblogs.com/ll15888/p/11252548.html