Vue.js中点击事件触发时如何向子组件传递变量？

步骤1：在父组件TimeLine.vue中新增存储URL的响应式变量 #

在组件的data选项里添加一个变量用于存放要传递的URL：

data() {
  return {
    // 保留你原有的其他变量
    memoUrl: '',
    isMemoOpen: false // 假设你用这个变量控制子组件的显示/隐藏
  }
},

步骤2：修改点击事件，将URL赋值给响应式变量 #

在你现有的点击事件逻辑中，把生成的url赋值给this.memoUrl：

i.addEventListener('click', () => {
  var itemId = item.id
  const url = `/shop/${this.selectedShopId}/room/${itemId}/suspend_memo`
  console.log('Timeline of URL', url)
  this.data = item.suspendedReserveMemo
  this.memoUrl = url // 新增这行，把URL存到响应式变量里
  this.openMemo()
})

如果你的openMemo方法是控制弹窗显示，确保方法逻辑正确：

methods: {
  openMemo() {
    this.isMemoOpen = true
  }
}

步骤3：在子组件SuspendedMemo.vue中定义接收URL的Props #

在子组件里声明一个props来接收父组件传递的URL：

props: {
  memoUrl: {
    type: String,
    required: false // 根据业务需求设置是否必填
  }
}

之后你就可以在子组件的模板或逻辑中通过this.memoUrl使用这个URL了。

步骤4：在父组件模板中给子组件绑定Props #

找到父组件模板里引用SuspendedMemo的地方，通过:memo-url（kebab-case格式）绑定我们的响应式变量：

<SuspendedMemo 
  :memo-url="memoUrl"
  :data="data"
  v-if="isMemoOpen"
/>

这样点击父组件里的图标时，生成的URL就会传递给子组件SuspendedMemo.vue了。

内容的提问来源于stack exchange，提问作者lionflick