孙组件传值给父组件

组件A里包含组件B，组件B里包含组件C，组件C的值要传值给组件A，那么就要用$listeners传值。

$listeners跟子传父差不多

1.在孙组件里定义事件，通过$emit把值传出去。

<template>
<div>
<button @click="trans()">传值</button>
</div>
</template>
<script>
export default {
  name: "Child",
  data () {
    return {
      cdata:"孙组件"
    };
  },
  methods: {
    trans(){
      this.$emit('test',this.cdata)
    }
  },
}
</script>

 

2.在子组件中定义v-on="$listerners"

  <child v-on="$listeners"></child>

 

3.父组件通过传过来的自定义事件，获取孙组件的值

<template>
  <div id="app">
     <HelloWorld @test="getValue($event)"/>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      hello:"hello"
    }
  },
  methods: {
    getValue(val){
      console.log(val);  // val就是孙组件传过来的

      this.hello = val
    }
  },
}
</script>