Question

我在VueJS中编写了一个简单的模板替换组件作为单个文件组件。它没有很多功能：只有一个道具，我还制作了一个计算属性来封装在该道具可以在模板中使用之前对该道具进行的一些棘手的转换。它看起来像下面这样：

<template>
  ...some-html-here...
    <a :href="myHref">...</a>
  ...
</template>

<script>
  export default {
    name: 'MyComponent',
    props: {
      href: { type: String, required: true },
    },
    computed: {
      myHref() {
        let result = this.href;
        // several lines of complicated logic making substitutions and stuff
        // ...
        return result;
      }
    }
  };
</script>

现在我认为这应该是一个功能组件，因为它没有状态，没有数据，没有反应性，所以围绕整个实例进行整理是浪费。

我可以通过向我的<template>添加'functional'属性来实现此功能。当然，在功能组件中，没有诸如计算属性或方法之类的东西。所以我的问题是：我在哪里可以提出几行复杂的逻辑？我不想将它直接嵌入到我的模板中，特别是因为它在多个地方使用。那么我在哪里可以放置代码来转换我的输入道具并使它们可以在我的模板中使用呢？

Answer 1

很好的问题。我试图找到相同的答案，但最终得到以下内容，但我不知道这是否是一个好方法。

“ html”部分：

<template functional>
  <div>
    <button @click="props.methods.firstMethod">Console Something</button>
    <button @click="props.methods.secondMethod">Alert Something</button>
  </div>
</template>

“ js”部分：

<script>
export default {
  props: {
    methods: {
      type: Object,
      default() {
        return {
          firstMethod() {
            console.log('You clicked me')
          },
          secondMethod() {
            alert('You clicked me')
          }
        }
      }
    }
  }
}
</script>

See it in action here

请务必阅读有关functional components at docs

的信息

注意：使用此方法要注意，因为功能组件是无状态的（无响应数据）和无实例的（无此上下文）。

VueJS功能组件（SFC）：如何封装代码？

1 个答案: