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

Posted 2023-02-23

【中文标题】VueJS 功能组件（SFC）：如何封装代码？

【英文标题】：VueJS functional components (SFC): how to encapsulate code?

【发布时间】：2018-11-13 21:21:17

【问题描述】：

我在 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> 来实现此功能。当然，在功能组件中，没有计算属性或方法之类的东西。所以我的问题是：我可以把我的几行复杂的逻辑放在哪里？我不想将它直接嵌入到我的模板中，尤其是当它在多个地方使用时。那么我可以在哪里放置代码来转换我的输入道具并准备好在我的模板中使用呢？

【问题讨论】：

我在这些场景中使用了渲染函数。如果你不喜欢使用函数语法，你也可以使用 jsx。

好点——当然可以通过切换到渲染函数来完成。不过，我真的在寻找在标记中保留模板优势的方法。

【参考方案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

注意：请注意使用这种方法，因为函数式组件是无状态的（无反应数据）和无实例的（无此上下文）。