vue子组件获取父组件的方法

在使用vue的过程中如何从子组件获取父组件中的方法，今天小编给大伙讲解一下。

下面是组件代码

<div id="app">
   <cpn></cpn>
   <cpn>
     <template v-slot:default="slotProps2">
       <span>{{slotProps2.test.join(' - ')}}</span>
     </template>
   </cpn>
  </div>
  <template id="cpn"> 
    <div>
      <slot :test="pLanguage">
        <ul>
          <li v-for="item in pLanguage">{{item}}</li>
        </ul>
      </slot>
      <button @click="getParentFn">获取父组件方法</button>
    </div>
  </template>

下面是组件方法

const app = new Vue({
      el:"#app",
      data:{

      },
      components:{
        cpn:{
          template:"#cpn",
          data(){
            return{
              pLanguage:['javascript','C++','java','C#','python','.net']
            }
          },
          methods: {
            getParentFn(){
              // 获取父组件的方法
              this.$parent.run()  // '我是父组件，我在奔跑
            }
          },
        }
      },
      methods: {
        run(){
          console.log('我是父组件，我在奔跑')
        }
      },
    })

以上就是在子组件中获取父组件的方法，你看懂了吗？-_-