我如何接收和传递“v-”道具给孩子？

Question

我想要一些包装器组件，其主要目的，正如您可能猜到的，只是以某种方式设置样式并包含传递的子项/传递的道具。

我有包装组件：

// components/FancyButton.vue

<template>
  <button class="fancy-button">
    <slot />
  </button>
</template>

我如何将“v-”道具传递给那个<button>以便它处理点击？

// components/App.vue

<template>
  <FancyButton v-on:click="doSomething()"> <!-- props go to nowhere -->
    Some children
  </FancyButton>
</template>

<script>
import FancyButton from './FancyButton'

export default {
  components: {
    FancyButton
  }
}
</script>

Answer 1

要将属性传递给组件，您必须在组件中声明它，然后在使用组件时使用v-bind语法。

例如，如果这是您的组件：

<template>
    <button class="fancy-button">
    <slot />
</button>
</template>

在模板的脚本部分：

<script>
   module.exports = {

      /...
      props: {
         yourData {
           type: DATA_TYPE
         }
      }
  }
  </script>

在包装器组件中，您执行以下操作：

<template>
   <FancyButton v-on:click="doSomething()" v-bind:yourData=""> 
        Some children
   </FancyButton>
</template>

要将函数作为道具传递，请执行以下操作：

<script>
   module.exports = {

      /...
      props: {
         yourData {
           type: Function
         }
      }
  }
  </script>

这通常是不鼓励的，您可以使用事件来实现您想要的相同逻辑。

我建议阅读以下文章：

如何在 Vue 中将函数作为 Prop 传递

将函数作为道具传递给 Vue.js 中的反模式