親コンポーネントがvue.jsの子コンポーネントをトリガーするメソッド

最初に、親コンポーネントでクリックイベントを記述します:
テンプレート内:

<el-button type="primary" size="small" @click="delete">删 除</el-button>
引入子组件部分:
ref="SelfTable"是子组件在父组件中的名字
<SelfTable ref="SelfTable"/>

内部のメソッド:
親コンポーネントのメソッドで子コンポーネントのメソッドを呼び出す

    delete(){
     this.$refs.SelfTable.deleteService();
     // SelfTable是引入的子组件的名字,deleteService是子组件中的方法
    }

例:

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>
元の記事91件を公開 いいね82 10,000以上の訪問

おすすめ

転載: blog.csdn.net/qq_42893625/article/details/105054443