利用ref屬性


//父元件
<template>
  <div class="home">
    <HelloWorld ref="mychild"></HelloWorld>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      clickParent() {
        
 
this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子元件
<template>
  <div class="hello">
    <h1>我是HelloWorld元件</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    created() {

    },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
 
</script>

注意：

　　　1、在子元件中：<div></div>是必須要存在的

　　2、在父元件中：首先要引入子元件import Child from './child';

　　3、<child ref="mychild"></child>是在父元件中為子元件新增一個佔位，ref="mychild"是子元件在父元件中的名字

　　4、父元件中components: {　　是宣告子元件在父元件中的名字

5、在父元件的方法中呼叫子元件的方法，很重要this.$refs.mychild.parentHandleclick("只");

轉：https://www.jianshu.com/p/7f04bf9c63eb

轉：https://www.cnblogs.com/mophy/p/8590291.html