VUE-子组件向父组件传值_v-show的两个子组件怎么传递参数-CSDN博客

本文链接：https://blog.csdn.net/LzzMandy/article/details/88691593

1、父组件通过绑定方法，向子组件传递方法

<com2 @func="show"></com2> func为向自组件传递的方法；show为父组件方法；

2、子组件通过向该方法传递参数，来实现向父组件传值

自组件通过 this.$emit('func', this.sonmsg)，把参数传递给func方法

注意：this.$emit('方法名', 唯一参数)，只有一个参数，这个参数可以是一个对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <div>父组件接收子组件传递过来的值：{{datamsgFormSon}}</div>
    <com2 @func="show"></com2>
  </div>

  <template id="tmp1">
    <div>
      <input type="button" value="这是子组件中的按钮" @click="myclick">
    </div>
  </template>

  <script>

    var com2 = {
      template: '#tmp1', 
      data() {
        return {
          sonmsg: '123',
          sonmsg2:{age:16,name:'lzz'}
        }
      },
      methods: {
        myclick() {
          // 调用父组件传递过来的方法，把第二个参数值传递给该方法
          this.$emit('func', this.sonmsg2)
        }
      }
    }

    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          this.datamsgFormSon = data.name
        }
      },
      components: {
        com2
      }
    });
  </script>
</body>

</html>