时间戳

首页 > 解决方案 > 单击 parent.vue 中的按钮后触发 child.vue 中的功能

javascript - 单击 parent.vue 中的按钮后触发 child.vue 中的功能

问题描述

我正在与BootstrapVue.

我有一个方法，parent.vue我将值 ( this.propsIndex) 传递给我的child.vue.

现在我想value每次在我的 child.vue 的方法中单击它时都使用它 - 但是我怎样才能触发我的函数并使其工作呢？

非常感谢！

如果可能的话，我想避免使用watch

我的父母.vue

<template>
  <div v-for="(id, index) in inputs" :key="index">
    <b-button @click="deleteViaIndex(index)">Delete</b-button>
    <child :indexProps="indexProps" />
  </div>

  <div>
    <b-button @click="addInput()">Add Input</b-button>
  </div>
</template>

<script>
  methods: {
    deleteViaIndex(index) {
      this.propsIndex= index;
    },

    addInput() {
      this.inputs.push({})
    },
  },

  data() {
    return {
      inputs: [{}],
      propsIndex: '',
    }
  }
</script>

我的孩子.vue（脚本）

props: ["propsIndex"],

methods: {
  deleteViaParentIndex() {
    //HERE I WANT TO USE IT EVERY TIME IT WILL BE CLICKED IN MY PARENT.VUE
    //BUT FOR NOW IT'S NOT DOING ANYTHING WHEN I CONSOLE.LOG(this.propsIndex)
  }
}

标签： javascriptvue.jsvuejs2components

解决方案

看起来名字不匹配。在子组件中，您有一个 prop propsIndex，但在您正在传递的父模板中indexProps。

传递道具时，你必须记住，道具名称总是在第一部分，你传递的值应该放在下一个。https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

此外，由于 HTML 属性名称不区分大小写，因此您应该以这种方式传递道具：

<child :props-index="indexProps" />

推荐阅读