父から息子へのvueでの受け渡し(簡単)

vueのコンポーネント通信は、私の友人が
習熟の段階に達していると信じています。vueの親子コンポーネント通信の頭の中で最初にすべきことは、$ emitを使用して送信することです。

実現は確実に達成可能です。1つを見てみましょう。簡単な方法


親コンポーネント:

渡されたメソッドメソッドは、親コンポーネントで定義され、親コンポーネントで出力されます

<template>
  <div class="about">
    <Son :arr="arr"></Son>
  </div>
</template>
<script>
import Son from './About'
export default {
    
    
  components:{
    
    
    Son
  },
  data(){
    
    
    return{
    
    
      arr:[
        {
    
    
          id: 1,
          name: '叮咚',
          method: () => {
    
    
            console.log('叮咚')
          }
        },
        {
    
    
          id: 2,
          name: '小小',
          method: () => {
    
    
            console.log('小小')
          }
        }
      ]
    }
  }
}
</script>

サブアセンブリ

<template>
  <div class="about">
    <div v-for="(item, index) in arr" :key="index">
      <button @click="item.method()">{
    
    {
    
     item.name }}</button>
    </div>
  </div>
</template>
<script>
export default {
    
    
  props: {
    
    
    arr: {
    
    
      type: Array,
      default: () => [],
    },
  },
};
</script>

おすすめ

転載: blog.csdn.net/weixin_46034375/article/details/108965763