Vueでクリックイベントをトリガーするには

Question

ここに事があります。 子コンポーネントにボタンがあり、ボタンをクリックするとイベントが発生します。親コンポーネントがマウントされたときにトリガしたいのですが、どうすればいいですか？または、目標に達する別の方法がありますか？ PS：このボタンは、子コンポーネントのv-forによって生成されます。

Answer 1

あなたの子コンポーネントは次のようになります。

<template> 
    <div class="child"> 
    <button @click="buttonClick">Button</button> 
    </div> 
</template> 

<script> 
    export default { 
    props: ['buttonId'], 
    methods:{ 
     buttonClick() { 
     this.$emit('buttonClick', this.buttonId) 
     } 
    } 
    } 
</script> 

そして、あなたの親コンポーネント：

<template> 
    <div class="parent"> 
    <child v-for="i in 5" :buttonId="i"></child> 
    </div> 
</template> 

<script> 
    import Child from './Child.vue' 

    export default { 
    components: { 
     Child, 
    }, 
    methods: { 
     onButtonClick(buttonId) { 
     console.log('Got a click event from button ', buttonId) 
     } 
    }, 
    mounted() { 
     this.$children().forEach(function(child) { 
     child.buttonClick() 
     }) 
    } 
    } 
</script>