Vue 父组件调用子组件的方法

Posted 2020-12-19 ygyy

利用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