Bagaimana cara mengirim variabel dari komponen induk ke komponen anak saat saya menggunakan "klik" di vue.js?

pemrograman


Saya memiliki dua komponen, TimeLine.vue(Parent) dan SuspendedMemo.vue(Child)

TimeLine.vue(Induk)

computed: {
    optionsData () {
        groupTemplate: (item, element, data) => {
          if (!item) return
          var container = document.createElement('div')
          if (item.isDisable !== true) container.setAttribute('class', 'enable')
          var i = document.createElement('i')
          // click
          i.addEventListener('click', () => {
            // itemのidを取得してSuspendedMemoに渡す
            var itemId = item.id
            const url = `/shop/${this.selectedShopId}/room/${itemId}/suspend_memo`
            console.log('Timeline of URL’, url)
            this.data = item.suspendedReserveMemo
            this.openMemo()
          })
          i.setAttribute('class', 'v-icon notranslate mr-2 mdi mdi-close-circle theme--light pink--text')
          container.appendChild(i)
          var span = document.createElement('span')
          span.innerHTML = item.content
          container.appendChild(span)
          return container
        }
      }
      return _.merge({}, base, this.options)
    }
  },

Ketika saya mengklik ↑, bagaimana cara mengirim variabel ‘url’ ke komponen SuspendedMemo.vue(Child)?

Apa yang saya coba:

How to send variable from Parent to Child component when I use "click" at Vue.js?

Solusi 1

Jika saya ingin melakukan ini, saya akan mempertimbangkan Slot atau Props di Vue. Untuk kasus khusus ini, ketika Anda tampaknya tidak terlalu khawatir tentang dampak aspek visual pada anak, saya akan tetap menggunakan Props. Anda bisa mendapatkan contoh alat peraga Di Sini[^].

コメント

タイトルとURLをコピーしました