vue子组件通过事件获取父组件的方法并传值

<!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.js"></script>
</head>
<body>
  <div id="app">
    <com1 @func="show"></com1>    // func可以自己定义
  </div>
  <template id="cont">
    <div>
      <h1>子组件的文本</h1>
      <input type="button" value="这是子组件的按钮，点击子组件的按钮可以访问父组件的方法" @click="fuzujian">
    </div>

  </template>
  <script>

    var vm = new Vue({
      el: "#app",
      data: {
        // 在父组件中定义自己的data数据，并让子组件的调用自己的方法的时候，吧子组件传递过来的值，存到自己的data中
        zizujiandezhi: null
      },
      methods: {
        show(data) {
          // console.log(data)
          // console.log("子组件会通过this.$emit（'自己定义的函数名进行调用'）这是父组件的方法" + data)
          this.zizujiandezhi = data
        }
      },
      components: {
        'com1': {
          template: "#cont",
          data() {
            return {
              person: { name: '熊熊' }
            }
          },
          methods: {
            fuzujian() {
              this.$emit('func', this.person)
            }
          },
        }
      }
    })

  </script>
</body>

</html>
 
posted @ 2020-01-10 18:30  小小小~  阅读(2332)  评论(0)    收藏  举报