vue父子组件按钮传值

在Vue中，父组件可以将数据传递给子组件，子组件可以通过props属性接收父组件传递过来的值。那么在父子组件中传递数据，可以通过以下步骤实现按钮传值：

1. 在父组件中定义一个变量，用于存储需要传递给子组件的值。

2. 在父组件中定义一个方法，用于在按钮点击时修改存储的变量的值。

3. 在父组件中使用子组件，并通过props属性将存储的变量传递给子组件。

4. 在子组件中通过props属性接收父组件传递过来的值。

下面是一个简单的示例代码：

父组件：

<template>
  <div>
    <button @click="changeValue">改变值</button>
    <child :value="parentValue"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentValue: '父组件的值'
    }
  },
  methods: {
    changeValue() {
      this.parentValue = '修改后的值';
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>子组件接收到的值：{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

在上面的示例代码中，父组件定义了一个变量parentValue，并且在按钮点击时修改了这个变量的值。然后通过props属性将这个变量传递给子组件。子组件通过props属性接收父组件传递过来的值，并在模板中显示出来。

当父组件中的按钮被点击时，子组件中显示的值也会发生变化。这就是父子组件之间传递数据的基本实现方式。